微信小程序 导航栏切换视图

Posted 2023-03-16

参考技术A 效果图

.wxml页面

<!-- nav导航 -->

<view class="goods">

  <block wx:for="tab" wx:key="key">

    <view class="item.style" bindtap="tarClick" data-index="index">item.titcle</view>

  </block>

</view>

<!--导航下  视图滑块 -->

<swiper bind:change="changeTab" current="index">

   <block>

     <swiper-item>

     <text>11111</text>

     </swiper-item>

     <swiper-item>

     <text>2222</text>

     </swiper-item>

     <swiper-item>

     <text>3333</text>

     </swiper-item>

   </block>

</swiper>

.js页面

Page(

    data: 

       tab:[

         titcle:"商品参数",style:"color", 

         titcle:"商品介绍",style:"",

         titcle:"商品规格",style:"",

        ],

        index:0,

       goods:''

    ,

       tarClick(e)

          //  console.log(e.currentTarget.dataset.index)

           let tab = this.data.tab;

          let that = this;

          let index = e.currentTarget.dataset.index

           console.log(index)

          tab.map((item,key)=>

           if(key==index)

           

              tab[key]['style']='color';

           else

             tab[key]['style']='';

           

          )

          that.setData(tab,index)

       ,changeTab(e)

          console.log(e.detail.current)

          let tab = this.data.tab;

          let that = this;

          let index = e.detail.current

           console.log(index)

          tab.map((item,key)=>

           if(key==index)

           

              tab[key]['style']='color';

           else

             tab[key]['style']='';

           

          )

          that.setData(tab,index)

       ,

）

.wxss页面

/* pages/details/details.wxss */

.goods

    width: 100%;

    height: 100rpx;

    /* background-color:yellowgreen; */

    display:flex;

    justify-content: space-around;

    align-items: center;



.goods view

    width: 160rpx;

    height: 100rpx;

    display: flex;

    justify-content: center;

    align-items: center;



.color

    color: red;

    border-bottom: 2px solid red;

微信小程序开发，导航栏右边的按钮怎么设置

设置导航栏

导航栏TabBar
如果我们的小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），那么我们可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

Tip： 通过页面跳转（wx.navigateTo）或者页面重定向（wx.redirectTo）所到达的页面，即使它是定义在 tabBar 配置中的页面，也不会显示底部的 tab 栏。

tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

属性值：

示例：
app.json：

运行：

微信小程序教程系列

相关连接：http://blog.csdn.net/michael_ouyang/article/details/54700871

参考技术A 微程序开发：https://jingyan.baidu.com/article/d169e186664564436611d8b2.html