小程式 ------- tab切換 swiper滑動

做了個簡單的雙向切換效果

效果 : 點選上面的菜單欄可以切換相應的内容,滑動内容的時候,菜單欄也會跟着切換。

<view class="my-order">
  <view class="{{current == index ? 'change': ' '}}" wx:for="{{title}}" data-index="{{index}}" bindtap='change'>{{item}}
    <view></view>
  </view>
</view>

<swiper current="{{current}}" bindchange='swiperChange'>
  <swiper-item wx:for="{{order}}">
    <view class="all">
    </view>
  </swiper-item>
</swiper>
           

.my-order{
  width: rpx;
  height: rpx;
  border-bottom: rpx solid #f0f0f0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: rpx;
}


.change view{
  width: %;
  border-bottom: rpx solid #b88f64;
  padding-bottom: rpx;
  margin-left: rpx;
}

.all{
  width:rpx;
  height: rpx;
  margin: rpx auto;
  background-color: pink;
}
           

Page({

  /**
   * 頁面的初始資料
   */
  data: {
    title: ["我要", "天天", "開心", "哦~"],
    current: ,
    index: ,
    id: ,
    order:[,,,]
  },
  change: function (e) {
    this.setData({
      current: e.currentTarget.dataset.index,
    })
  },
  swiperChange(e) {
    let current = e.detail.current;
    this.setData({
      current: current,

    })
    console.log(current)
  },
})
           

簡單的切換效果就做出來了。