微信小程式：如何實作tabs選項卡效果範例-小程式開發-PHP中文網

首頁

微信小程式

小程式開發

微信小程式：如何實作tabs選項卡效果範例

May 29, 2018 pm 03:01 PM

小女子也是剛入門微信小程式不久，發現微信內部很多組件都已經封裝好了，但是卻沒有tab選項卡效果的組件，最近正好需要用到，就研究了一下。整理出來供大家一起探討學習，哪裡有問題或可以改進的地方，歡迎大家指點吐槽。

首先點擊導航的時候需要兩個變量，一個儲存目前點擊樣式類，一個是其它導航預設的樣式類

選項卡內容列表同樣也需要兩個變量，一個儲存目前顯示區塊，一個儲存的是其它隱藏的預設區塊

使用三目運算透過點擊取得導航索引，根據索引判斷是否新增目前類別【備註，這裡我將點選事件綁定在父級導覽欄，透過target物件得到點選觸發的事件物件屬性】

請結合如下效果圖：

微信小程序：如何实现tabs选项卡效果示例

##demo.wxml：

&lt;blockquote&gt;&lt;view class=&quot;tab&quot;&gt;

登入後複製

demo.js

Page( {  
  data: {  
    tabArr: {  
      curHdIndex: 0,  
      curBdIndex: 0  
    },  
  },  
  tabFun: function(e){  
    //获取触发事件组件的dataset属性  
    var _datasetId=e.target.dataset.id;  
    console.log(&quot;----&quot;+_datasetId+&quot;----&quot;);  
    var _obj={};  
    _obj.curHdIndex=_datasetId;  
    _obj.curBdIndex=_datasetId;  
    this.setData({  
      tabArr: _obj  
    });  
  },  
  onLoad: function( options ) {  
    alert( &quot;------&quot; );  
  }  
});

登入後複製

demo.wxss

.tab{  
    display: flex;  
    flex-direction: row;  
}  
.tab-left{  
    width: 200rpx;  
    line-height: 160%;  
    border-right: solid 1px gray;  
}  
.tab-left view{  
    border-bottom: solid 1px red;  
}  
.tab-left .active{  
    color: #f00;  
}  
.tab-right{  
    line-height: 160%;  
}  
.tab-right .right-item{  
    padding-left: 15rpx;  
    display: none;  
}  
.tab-right .right-item.active{  
    display: block;  
}

登入後複製

最終示範效果如下：

微信小程序：如何实现tabs选项卡效果示例