微信小程序_tab切換加swiper滑動組件

swiperTab.wxml 代碼

<!-- tab切換標籤欄 -->
<view class="tab">
    <block wx:for="{{styles}}" wx:key="styles">
            <view class="{{item.class}}" bind:tap="tab" data-index="{{index}}">{{item.text}}</view>
    </block>
</view>
<!-- swiper滑動展示內容 -->
<swiper circular="{{true}}" current="{{index}}" bind:change="changeTab">
    <swiper-item >內容111</swiper-item>
    <swiper-item >內容222</swiper-item>
    <swiper-item >內容333</swiper-item>
</swiper>

swiperTab.wxss 樣式

.tab{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.icon{
  color: brown;
}

tabFunction.js 封裝的tab切換方法

/*
    切換方法的封裝
    參數一:樣式參數
    參數二:滑動swiper下標
*/
function tabComper(styles,index = 0){
    styles.map((val,key) =>{
          if(key == index){
            return styles[key].class = 'icon';
          }else{
            return styles[key].class = '';
          }
    })
    //返回對象
    return{
        index,
        styles
    };


}
//小程序 導出
module.exports ={
    tabComper : tabComper
}

swiperTab.js調用代碼

//導入tabFunction.js封裝的tab切換js文件
const module  = require("../../commond/tabFunction.js");

// pages/swiperTab/swiperTab.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    styles:[
      {class:'icon',text:"tab1",hidden:false},
      {class:'',text:"tab2",hidden:true},
      {class:'',text:"tab3",hidden:true}
    ],
    index:0
  },

  //點擊tab切換欄時觸發
  tab(evt){
    //獲取頁面傳過來的index參數
    var index = evt.target.dataset.index;
    //獲取data裏的styles對象數組
    var styles = this.data.styles;
    //調用tabFunction.js封裝的tab切換方法
    var ret = module.tabComper(styles,index);
    //將對象設置到數據裏
    this.setData(ret);

    //實現方式二
    // styles.map((val,key) =>{
    //   // console.log(styles[key].class);
    //     if(key == index){
    //       styles[key].class = 'icon';
    //     }else{
    //       styles[key].class = '';
    //     }
    // })

    // this.setData({
    //   index,
    //   styles
    //   }
    // );
  },

  //swiper切換時觸發
  changeTab(evt){
        //獲取頁面當前的index參數
    var index = evt.detail.current;
        //獲取data裏的styles對象數
    var styles = this.data.styles
    //調用tabFunction.js封裝的tab切換方法
    var ret = module.tabComper(styles,index);
    //將對象設置到數據裏
    this.setData(ret);

     //實現方式二
    // console.log("index =>"+index2);
    // console.log("styles => "+styles);

    // styles.map((val,key) =>{
    //   // console.log(styles[key].class);
    //     if(key == index2){
    //       styles[key].class = 'icon';
    //     }else{
    //       styles[key].class = '';
    //     }
    // })

    // this.setData({
    //   index2,
    //   styles
    //   }
    // );
  },

 
})

實現簡單效果: