微信小程序swiper左右滑动点击tab左右滑动
分类: 微信小程序 专栏: 小程序 标签: 微信小程序swiper左右滑动点击tab左右滑动
2024-11-06 14:51:47 184浏览
微信小程序swiper左右滑动点击tab左右滑动
<!-- 04-消息 --> <!-- tab栏 --> <view class="tab"> <block wx:for="{{groupNaviList}}" wx:key="id"> <view class="messageTab {{navId===item.id?'active':''}}" bindtap="changeNav" id="{{item.id}}">{{item.name}}</view> </block> </view> <!-- 消息内容展示current="{{navId}}"修改navId来控制左右滑动 --> <swiper class="messageSwiper" circular="{{true}}" current="{{navId}}" bindchange="switchTabView"> <swiper-item> 11111111111 </swiper-item> <swiper-item> 22222222222222222 </swiper-item> </swiper>
image.png
image.png
Page({ data: { groupNaviList: [{ id: 0, name: '消息' }, { id: 1, name: '关注' } ], navId: 0, }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { }, //点击切换导航的回调 changeNav(e) { // console.log(e) let navId = e.currentTarget.id *1; this.setData({ navId: navId }) }, // swiper滑动函数回调 switchTabView(e) { let navId = e.detail.current this.setData({ navId }) }, })
好博客就要一起分享哦!分享海报
此处可发布评论
评论(0)展开评论
暂无评论,快来写一下吧
展开评论
您可能感兴趣的博客
他的专栏
他感兴趣的技术