微信小程序swiper左右滑动点击tab左右滑动

<!-- 04-消息 -->
 
<!-- tab栏 -->
<view class="tab">
  <block wx:for="{{groupNaviList}}" wx:key="id">
    <view class="messageTab {{navId===item.id?'active':''}}" bindtap="changeNav" id="{{item.id}}">{{item.name}}</view>
  </block>
</view>

 

<!-- 消息内容展示current="{{navId}}"修改navId来控制左右滑动 -->
<swiper class="messageSwiper"  circular="{{true}}"   current="{{navId}}" bindchange="switchTabView">
  <swiper-item>
   
     11111111111
 
  </swiper-item>


 
  <swiper-item>
    22222222222222222
  </swiper-item>
  

</swiper>

image.png

image.png

Page({

  data: {
   
    groupNaviList: [{
        id: 0,
        name: '消息'
      },
      {
        id: 1,
        name: '关注'
      }
    ],
    navId: 0,

  


  },
   

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    
      
  },
 
  //点击切换导航的回调
  changeNav(e) {
    // console.log(e)
    let navId = e.currentTarget.id *1;
    this.setData({
      navId: navId  
    }) 
    
  },

  // swiper滑动函数回调
  switchTabView(e) { 
    let navId = e.detail.current 
    this.setData({
      navId
    })
  },

  
})