小程式 — 選項卡

前言：在小程式中實現選項卡的功能。
GitHub：
先看一下最終的實現效果：

小程式實現選項卡功能

1、頁面結構

• 使用wx:for對list陣列進行迴圈遍歷，得出選項欄的頭部文字；

• 繫結一個名為tabClick的tap事件並把索引index作為引數傳遞過去；

• 然後我們將內容的索引值與使用者當前正在點選的索引index進行判斷後顯示所對應的內容；

  <!-- 選項欄 --&gt
  
    {{item}}
  
  <!-- 內容 --&gt
  
    0
    1
    3
    4
  

2、基本樣式

• 樣式就是一些簡單的佈局，不是很重要，就不解釋了，大家隨意看看便可：

2、資料與事件

（1）頁面所需要的data基本資料：

• list是選項欄迴圈的文字項；

• activeIndex是使用者當前點選的索引；

data = {  list: ['全款', '待收貨', '待發貨', '已收貨'],
  activeIndex: 0};

（2）將使用者點選傳過來的index值賦給data中改變當前的索引值activeIndex

tabClick(val) {  this.activeIndex = val;  this.$apply();
}

這樣我們就實現了一個簡單選項卡的製作。

作者：Ewall_
連結：