本文介绍了微信小程序中如何通过wxml文件设计、js脚本和wxss样式布局实现页面菜单栏的切换功能。在wxml中定义了三个可点击的选项卡，使用数据绑定改变选中状态；在js中编写事件处理函数`checkCurrent`和`bindchange`来响应用户的切换操作，更新当前页面索引；最后，wxss中设置了相应的样式使页面布局美观。
一.页面wxml文件设计部分代码：
<view class='topTabSwiper'>
<view class='tab { {currentData == 0 ? "tabBorer" : ""}}' data-current = "0" bindtap='checkCurrent'>推荐</view>
<view class='tab { {currentData == 1 ? "tabBorer" : ""}}' data-current = "1" bindtap='checkCurrent'>热点</view>
<view class='tab { {currentData == 2 ? "tabBorer" : ""}}' data-current = "2" bindtap='checkCurrent'>关注</view>
</view>
<swiper current="{ {currentData}}" class='swiper' style="height:600px;" duration="300" bindchange="bindchange">
<swiper-item><view class='swiper_con'>这是个推荐页面</view>
</swiper
最低0.47元/天 解锁文章
扫一扫
366
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
