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

Question

微信开发者工具 做商品详情页时，点击详情，下面出现详情页。点击推荐，下面出现推荐页面。怎么实现？类似于下面的这种。。谢谢。

Answer 1

用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
      });
    }
  }