第一步：
在 .js 文件里定义数据：
data: {tabs:["选项1","选项2","选项3","选项4"],checked:0},tabs 表示有几个选项，checked 表示当前选中的是哪一页的索引。
第二步：
在 .wxml 编写代码：
<view id="tabs" ><view wx:for="{{tabs}}" data-idx="{{index}}"
class="item {{checked==index?'active':''}}" bindtap="navTip">{{item}}</view>
</view><swiper current="{{checked}}" class="swiper" duration="300" bindchange="bindChange"> <swiper-item wx:for="{{tabs}}"> <view>页面{{index+1}}</view> </swiper-item>
</swiper>* 通过 wx:for循环来渲染顶部选项卡，在class里使用三元判断checked是否等于当前遍历的索引，是的话加上 active 这个类
* swiper 的 current 属性是表示当前所在滑块的index(可理解为页面的索引)
第三步：
在 .wxss 里加上样式
#tabs{display: flex;justify-content: space-around;
}.item{flex:1 0%;margin:0rpx 10rpx 10rpx 10rpx;padding-bottom: 12rpx;color:black;text-align: center;
}.active{color:orange;border-bottom: 4rpx solid orange;
}.swiper{display: block;width: 100%;overflow: hidden;
}
.swiper view{ text-align: center; padding-top: 100rpx;
}第四步：
在 .js 文件里添加两个函数
bindChange: function (e) { this.setData({checked: e.detail.current });
},
navTip: function (e) { if (this.data.checked === e.target.dataset.idx) { return false; } else { this.setData({ checked: e.target.dataset.idx }) }
},效果：
学习笔记 学习笔记 ~
本文链接：https://my.lmcjl.com/post/3155.html
展开阅读全文
4 评论