小程序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: 750rpx;
  height: 50rpx;
  border-bottom: 10rpx solid #f0f0f0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 30rpx;
}


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

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

Page({

  /**
   * 页面的初始数据
   */
  data: {
    title: ["我要", "天天", "开心", "哦~"],
    current: 0,
    index: 0,
    id: 0,
    order:[1,2,3,4]
  },
  change: function (e) {
    this.setData({
      current: e.currentTarget.dataset.index,
    })
  },
  swiperChange(e) {
    let current = e.detail.current;
    this.setData({
      current: current,

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

转载 https://blog.csdn.net/weixin_42886276/article/details/81838901