微信小程式swiper左右切換

廢話不多說直接來幹貨

上截圖：

 上代碼：home.wxml

<!--swiper制作tab切換-->
    <view class="tab">
        <view class="tab-item {{currentTab==0?'on':''}}" bindtap="changeItem" data-current="0">平台名稱</view>
        <view class="tab-item {{currentTab==1?'on':''}}" bindtap="changeItem" data-current="1">平台簡介</view>
        <view class="tab-item {{currentTab==2?'on':''}}" bindtap="changeItem" data-current="2">平台優勢</view>
    </view>
    <view class="content">
    <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange"> 
      <swiper-item>
        <text>{{text}}</text>
      </swiper-item>
      <swiper-item>
        <text>11111111111111</text>
      </swiper-item>
      <swiper-item>
        <text>22222222222222</text>
      </swiper-item>
    </swiper>
    </view>
           

 home.js

data: {
    // 幻燈片
    imgUrls: [
      '/images/1002074.jpg',
      '/images/1002074.jpg',
      '/images/1002074.jpg'
    ],
        indicatorDots: true,
        autoplay: true,
        interval: 3000,
        duration: 1000,
            // 頁面配置  
            winWidth: 0, 
            winHeight: 0, 
            // tab切換
            currentTab: 0,
  },

      //swiper制作tab切換
      // 滑動切換tab 
      bindChange: function( e ) { 
          var that = this; 
          that.setData( { currentTab: e.detail.current }); 
        }, 
   // 點選tab切換 
      changeItem: function( e ) { 
        var that = this; 
        if( this.data.currentTab === e.target.dataset.current ) { 
        return false; 
        }else{ 
        that.setData( { 
          currentTab: e.target.dataset.current 
        }) 
        } 
      },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    var that = this;

    // 擷取系統資訊
    wx.getSystemInfo({
      success: function (res) {
          that.setData({
          winWidth: res.windowWidth,
          winHeight: res.windowHeight
        });
      }
    });
  },
           

 home.wxss

.tab{
  display: flex;
  margin-top:30rpx ;
  width:100%;
 }
 .tab-item{
  flex:1;
  font-size:12pt ;
  text-align: center;
  line-height: 80rpx;
  border-bottom: 9rpx solid #eee;
 }
 .content{
  flex: 1;
 }
 .content>swiper{
  height: 100%;
 }
 .tab-item.on{
  color:#33a3dc;
  border-bottom-color:#33a3dc ;
 }