微信小程序tab頁、輪播圖demo

效果：

思路：
利用小程序列表渲染功能，讀取導航欄中欄目數據的index和item。將index存入事件中能夠讀取的data中。js讀取這個data值以後，修改相應模塊元素的class，修改樣式。

最巧妙的就是利用{{currentNavbar==idx ? 'active' : ''}}這個數據綁定判斷當前塊是否被選中的狀態

wxml：

<view class="navbar">
  <view class="navbar-item" wx:for="{{navbar}}" wx:for-index="idx"  data-idx="{{idx}}" bindtap="swichNav">
    <text class="navbar-text {{currentNavbar==idx ? 'active' : ''}}">{{item}}</text>
  </view>
</view>

js：

Page({
  data: {
    navbar: ['推薦', '新做', '展覽'],
    currentNavbar: '0',
  },
  swichNav:function(e){
    this.setData({
      currentNavbar: e.currentTarget.dataset.idx
    });
  },
}

wxss（部分）：

.navbar {
    display: flex;
    border-bottom: 1px solid #eee;
}
.navbar-item {
    flex: 1.0;
    text-align: center;
    font-size: 14px;
    color: #999;
    margin-bottom: -1px;
}
.navbar-text {
    display: block;
    width: 30px;
    padding: 10px;
    margin: auto;
}
.navbar-text.active {
    border-bottom: 2px solid #000;
    color: #000;
    font-weight: bold;
}

---

延伸：相似tab切換的卡片切換效果（稍做修改便可成爲輪播圖）

效果：

wxml：

<view class="wrap" bindtouchstart="touchStart" bindtouchend="touchEnd">

  <view class="nav-item {{testClass[index]}}" wx:for="{{testNav}}" data-index="{{index}}">
    <view>{{item.word}}</view>
  </view>

</view>

wxss：

.wrap{
  margin-top: 20rpx;
  color: #999;
  position: relative;
  width: 750rpx;
  height: 250rpx;

}

.nav-item{
  width: 400rpx;
  height: 200rpx;
  box-shadow: 0 0 5rpx #e24233;
  padding: 5rpx;
  transition: all 0.5s;
  word-break:break-all;
  background-color: snow;
}

.prev{
  position: absolute;
  transform: scale(0.8);
  left: -280rpx;
  margin-right: 55rpx;
}

.current{
  position: absolute;
  left: 50%;
  margin-left: -200rpx;

}

.next{
  position: absolute;
  left:620rpx;
  top: 0;
  transform: scale(0.8);
  z-index: 10;
}

.next+.next{
  z-index: -1;
  background-color: deepskyblue;
}

最後.next+.next這個樣式是爲了使卡片切換時能看到右側卡片的移動過程，而不是右側一直有一個不動的卡片

js：

var flag = 0;
var classCatch = ['current', 'next', 'next', 'next'];
var touch = [0,0];

Page({
  data: {
    testClass:classCatch,
    testCurrentNav:0,
    testNav:[{
      word:'111我來自後方111111111111111111111111',
    },{
        word: '222我來自後方222222222222222222222222222222',
    },{
        word: '333我來自後方33333333333333333333333333333333333333',
    },{
        word: '444我來自後方4444444444444444444444444444444444444',
    }]
  },
    /**
   * 測試輪播圖
   */
  touchStart (e){
    touch[0] = e.touches[0].clientX
  },
  touchEnd (e){
    touch[1] = e.changedTouches[0].clientX;
    if(touch[0]-touch[1]>5){
      this.swipNext();
    } else if (touch[1] - touch[0] > 5){
      this.swipPrev();
    }
  },
  swipNext (e) {
     flag++;
     if (flag < this.data.testNav.length){
       for (var i = 0; i < this.data.testNav.length; i++) {
         if (i == flag) {
           classCatch[i] = 'current';
         } else if (i < flag) {
           classCatch[i] = 'prev';
         } else {
           classCatch[i] = 'next';
         }
       }
       this.setData({
         testClass: classCatch
       })
     }else{
       flag = this.data.testNav.length-1;
     }
  },
  swipPrev(e) {
    flag--;
    if (flag+1 > 0 ) {
      for (var i = 0; i < this.data.testNav.length; i++) {
        if (i == flag) {
          classCatch[i] = 'current';
        } else if (i < flag) {
          classCatch[i] = 'prev';
        } else {
          classCatch[i] = 'next';
        }
      }
      this.setData({
        testClass: classCatch
      })
    } else {
      flag = 0;
    }
  }
}）

目前以爲比較簡潔的就是這樣的寫法，畢竟比較小白，若是大佬們有更簡潔的方法，請多多指教。