微信小程序顶部选项卡之二

最新推荐文章于 2025-06-11 13:11:18 发布

最爱抹茶味

最新推荐文章于 2025-06-11 13:11:18 发布

阅读量907

点赞数

CC 4.0 BY-SA版权

分类专栏：微信开发平台

本文链接：https://blog.youkuaiyun.com/qq_22056455/article/details/79594488

微信开发平台专栏收录该内容

4 篇文章

订阅专栏

另外一种在代码中添加导航栏的方式

用循环模式来获取导航

<view class='navbar-tab'>
   <!-- 导航栏 -->
   <view wx:for='{{navbardata}}' data-currentId="{{index}}" class="navbar-swiper {{currentTab==index?'active':''}}" bindtap='swichNav' >
   {{item}}
   </view>
</view>
<!-- 内容 -->
<swiper current='{{currentTab}}' duration='300' bindchange='bindChange'>
    <swiper-item>
       <view>aaa</view>
    </swiper-item>
     <swiper-item>
       <view>bbb</view>
    </swiper-item>
     <swiper-item>
       <view>ccc</view>
    </swiper-item>
</swiper>

在data中添加数组即可

 navbardata: ["一", "二","三"],

  //滑动      
  bindChange:function(e){
    this.setData({ currentTab: e.detail.current})
  },
  //点击导航
  swichNav:function(e){
    //wxml添加个data-currentId自定义属性
    this.setData({ currentTab: e.target.dataset.currentid})
  }