微信小程序_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
    //   }
    // );
  },

 
})

实现简单效果: