微信小程序商品详情页面实现三个tab选项卡（商品参数、商品介绍、规格明细）

前段书写

  <view class="about">
  <!-- 循环展示出tap信息 -->
    <block wx:for="{{swiperTitle}}">
      <view bindtap="tapTitle" data-id="{{index}}" class="{{item.class}}">{{item.name}}</view>
    </block>
  </view>
  <!-- 设置滑动模块 -->
  <swiper bindchange="swiperInfo" current="{{current}}">
    <swiper-item>111111111111111</swiper-item>
    <swiper-item>22222222222222222</swiper-item>
    <swiper-item>333333333333333333333333</swiper-item>
  </swiper>
</view>

js中书写

// 点击文字
tapTitle(e){
    let index=e.currentTarget.dataset.id
    let arr=this.data.swiperTitle
     //循环处理数组
  for(let i=0;i<arr.length;i++){
    //判断并更改
    if(i==index){
      arr[i]['class'] = "txtColor";
      continue;
    }
    arr[i]['class'] = "";
  }
  //更新页面数据
  this.setData({swiperTitle:arr,current:index});
  },
// 滑动改变文字颜色样式
  swiperInfo(e){
   let index=e.detail.current
    let arr=this.data.swiperTitle
     //循环处理数组
  for(let i=0;i<arr.length;i++){
    //判断并更改
    if(i==index){
      arr[i]['class'] = "txtColor";
      continue;
    }
    arr[i]['class'] = "";
  }
  //更新页面数据
  this.setData({swiperTitle:arr,current:index});

  },