用swiper做。。。。。。。。。

-----------------------------------假装这是更新线------------------------------
首先，你需要布局你的页签头部

<view class="swiper-tab">
  <view class="swiper-tab-list {{currentTab==0?'on':''}}" data-current="0" bindtap="switchNav">详情</view>
  <view class="swiper-tab-list {{currentTab==1?'on':''}}" data-current="1" bindtap="switchNav">记录</view>
  <view class="swiper-tab-list {{currentTab==2?'on':''}}" data-current="2" bindtap="switchNav">评价</view>
    <view class="swiper-tab-list {{currentTab==3?'on':''}}" data-current="3" bindtap="switchNav">推荐</view>
</view>

其中currentTab需要在对应的上js文件的page下data里面定义。
其次，就是放一个swiper，里面放四个swiper-item，类似于这样

<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight-10}}px" bindchange="bindChange">
<swiper-item>详情的布局</swiper-item>
<swiper-item>记录的布局</swiper-item>
<swiper-item>评价的布局</swiper-item>
<swiper-item>推荐的布局</swiper-item>
</swiper>

其中，swiper有个current属性，里面的值就是刚刚定义的currentTab。
最后贴上点击页签切换swiper的js代码：

//点击切换tab
  switchNav: function(res) {
    if (this.data.currentTab === res.target.dataset.current) {
      return false;
    } else {
      _this.setData({
        currentTab: res.target.dataset.current
      });
    }
  }

qq_44890629

微信小程序，商品详情页点击导航后，加载不同页面。

1条回答

为你推荐