微信小程序滑动切换tab - WXOPEN Club | 微信小程序专业社区

有没有滑动切换一个页面中n个tab的案例可以参考一下，试过滑动事件，功能能实现，可体验效果不尽如人意；试过swiper,效果是想要的效果，可是每个tab的页面高度都要一样，而我的三个tab内容都是动态加载的，高度相差很大，所以并不适用。求做过的大神指点

bcheng 1楼•4 年前

html
<view class="header relative shadow">
  <view class="w_33 bg_w h_100 absolute transition4" style="left:{{(index-1)*33}}%"></view>
  <view class="header_item absolute flex_align color_w">
<view class="w_33 text_align" data-set="1" bindtap="click">1</view>
<view class="w_33 text_align" data-set="2" bindtap="click">2</view>
<view class="w_33 text_align" data-set="3" bindtap="click">3</view>
  </view>
</view>

js:

Page({
  data: {
   index:1
  },
  click:function(e){
   this.setData({
      index:e.currentTarget.dataset.set
   })
   console.log(this.data.index)
  }

})
具体应该是这样的

咫尺开发论坛——小乐