小程序 swiper仿tab切换----动态绑定事件+获取wxml节点+在wxs里修改节点样式

一、先看效果：

（不知道为啥录屏后的gif视频总会偏移，令人烦恼，望大神告知~）

 

二、用到的知识点枚举

scroll-view，详情请戳此：https://blog.csdn.net/mChales_Liu/article/details/99859680

swiper + swiper-item，详情请戳此：https://blog.csdn.net/mChales_Liu/article/details/100037784

 

三、上代码：

// index.wxml


    
        
            
                {{item.content}}
            
        
    
    
        
            
                
                
                
            
        
        
            
                
                    
                
                
                    
                
                
                    
                
            
        
        
            
                
                
                
            
        
    
    hello,world

// index.wxs

Page({

    /**
     * 页面的初始数据
     */
    data: {
      tabId:'',
      tabs:[
        {
          id:"1",
          content:"标签1"
        },
        {
          id:"2",
          content:"标签2"
        },
        {
          id:"3",
          content:"标签3"
        }
      ],
      duration: 300,// 滑动动画时长
      current: 0,// 当前所在滑块的 index
      currentItemId: 1,// 设置默认一开始显示第几个滑块
      imgUrls: [
        'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
        'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
        'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
      ]
    },
    
    /**
    * 自定义函数
    */ 
    tabClick(e){
      // console.log('----------this', this);
      // console.log('----------wx', wx);
      // console.log('----------e', e);
      // 控制tab标签的切换
      this.setData({
        tabId:e.target.id,
        current:e.target.id - 1
      });
    },
    // 滑动切换
    swiperChange(e){
      // console.log('----------eSW', e);
      if(e.detail.source === 'touch') {
        this.setData({
          tabId:e.detail.current + 1 + '',
          current:e.detail.current
        })
      }
    },
    
    /**
     * 生命周期函数--监听页面加载`
     */
    onLoad: function (options) {
      // 初始化数据
      this.setData({
        tabId:'1',
        current:0
      });
    },

// index.wxss

/* tab标签样式 */
.tabs{
    display: flex;
    justify-content: center;
    flex-direction: row;
    margin-bottom: 30rpx;
    border-bottom: 1rpx solid #ddd;
}
.tab_btn{
    text-align: center;
    padding:30rpx 45rpx 10rpx 45rpx;
    margin:2rpx 0 0 0;
    z-index: 999;
}
/* swiper样式 */
.scroll_box{
    height: 100%;
}
.item{
    width: 80%;
    height: 300rpx;
    margin: 20rpx auto;
}
/* 动态样式 */
.tab_btn_act{
    border-bottom: 4rpx solid rgb(219, 4, 4);
    border-right: 4rpx solid rgb(219, 4, 4);
    padding:30rpx 42rpx 7rpx 42rpx;
}