（基础知识随笔记录）小程序实现Tab切换内容swiper效果

最近学习小程序遇到了一个需求，就是要实现点击tab切换内容，或滑动屏幕切换内容，对于大牛们来说确实不值一提，不过我自己的话就有点艰难。

好在我是半夜写的，头脑逻辑比较清醒，于是很快就做出来了，之前也在网上趴了帖子，不过实现的过程都比较复杂，于是自己做了个自我感觉还行的，如果有更加精简的方法请砸过来，嘿嘿。

效果：

废话不多说，上代码

wxml:

 
    
      
        
          
            {{item.titleText}}
            {{item.titleTag}}
          
          
          
          
          
            
          
        
      
    
  

    
      {{item}}
    
  

wxml大概逻辑：内容的切换直接用swiper，这样方便处理，而且效果还比较好，至于Tab就自己随便写个view就行。

难点：

1.通过点击tab选项卡来实现内容swiper切换到指定内容

2.滑动屏幕时，不仅swiper会切换，tab选项卡也要会跟着切换，实现样式的改变

小程序不支持直接操作DOM，因此只能通过视图层绑定逻辑层的data，视图层的操作传到逻辑层后刷新data中相应值来实现间接操作DOM。

js：

// pages/myinfo/range/range.js
Page({
  data:{
    cardViewContent:[
      {
        titleText: '镀锌类产品',
        titleTag: '丰泰集团', 
        img: 'https://ideacom.cn/public/wxsrc/gangcai/images/range/e1.jpg'
      },
      {
        titleText: '热轧类产品',
        titleTag: '丰泰集团',
        img: 'https://ideacom.cn/public/wxsrc/gangcai/images/range/e2.jpg'
      },
      {
        titleText: '冷轧类产品',
        titleTag: '丰泰集团',
        img: 'https://ideacom.cn/public/wxsrc/gangcai/images/range/e3.jpg'
      },
      {
        titleText: '冷轧硅钢类产品',
        titleTag: '丰泰集团',
        img: 'https://ideacom.cn/public/wxsrc/gangcai/images/range/e4.jpg'
      },
      {
        titleText: '涂彩类产品',
        titleTag: '丰泰集团',
        img: 'https://ideacom.cn/public/wxsrc/gangcai/images/range/e5.jpg'
      },
      {
        titleText: '线材类产品',
        titleTag: '丰泰集团',
        img: 'https://ideacom.cn/public/wxsrc/gangcai/images/range/e6.jpg'
      }
    ],
    bottomTab:['镀锌','热轧','冷轧','硅钢','涂彩','线材'],
    activeTab: 0
  },
//预览图片，暂时没用
 previewImg:function(e){
    wx.previewImage({
      current:this.data.qrcodeImg,
      urls: this.data.qrcodeImg
    })
  },
//点击选项卡Tab操作
 rcbBottomTab:function(e){
    this.setData({
      activeTab:e.target.dataset.index
    })
    //console.log(e)
    //console.log(this.data.activeTab)
  },
//滑动屏幕操作
 swiperChange:function(e){
    var activeTabIndex = e.detail.current
      this.setData({
        activeTab: activeTabIndex
      })
      //console.log(this.data.activeTab)
      //console.log(e)
    
  }
  
})

这里为了方便，直接使用静态数据
实现关键点：

 小程序的swiper提供了一个叫current的参数，用来指定当前显示swiper页面的值，打印他的结果如下

主要关注current的值，source牵扯另一件事情，这里暂时不提。很明显，当前页是实际上的第二页，因此值为1（从0开始记）。

如果我们想办法改变了页面中的current的值，那么就可以实现点击tab切换的效果，

因此在data中定义一个中间值，用来传送要改变的页面current，

activeTab: 0

当我们滑动swiper时，会通过视图层的bindchange="swiperChange"这个function 改变activeTab值，页面中的tab又来读取到这个值，就会实现在滑动时改变tab样式的效果。

那么反过来，给每个tab绑定rcbBottomTab这个函数，通过点击tab改变activeTab的值，来实现swiper跳转到指定内容的效果。

至关重要的一点就是需要给swiper绑定activeTab的值：

至于tab的样式切换，写个id的三元运算就行了，我这里是循环来着，所以直接偷懒用了index的值，如果只有一两个tab那自己写一下data-这个参数就行，总之判断activeTab的值等不等于当前对应tab的值，不等于就指定id就行。

{{item}}