小程式 — 選項卡
摘要：
前言：在小程式中實現選項卡的功能。
GitHub： https://github.com/Ewall1106/miniProgramDemo
先看一下最終的實現效果：
小程式實現選項卡功能
1、頁面結構
使用 wx:fo...
前言：在小程式中實現選項卡的功能。
GitHub： https://github.com/Ewall1106/miniProgramDemo
先看一下最終的實現效果：
小程式實現選項卡功能
1、頁面結構
- 使用
wx:for對list陣列進行迴圈遍歷，得出選項欄的頭部文字； - 繫結一個名為
tabClick的tap事件並把索引index作為引數傳遞過去； - 然後我們將內容的索引值與使用者當前正在點選的索引
index進行判斷後顯示所對應的內容；
<view class="container">
<!-- 選項欄 -->
<view class="title">
<view wx:for="{{list}}" wx:key="index" class="list_item {{activeIndex == index ? 'on' : ''}}" @tap="tabClick({{index}})">{{item}}</view>
</view>
<!-- 內容 -->
<view class="content">
<view style="display:{{activeIndex !== 0 ? 'none' : 'block'}}">0</view>
<view style="display:{{activeIndex !== 1 ? 'none' : 'block'}}">1</view>
<view style="display:{{activeIndex !== 2 ? 'none' : 'block'}}">3</view>
<view style="display:{{activeIndex !== 3 ? 'none' : 'block'}}">4</view>
</view>
</view>
2、基本樣式
- 樣式就是一些簡單的佈局，不是很重要，就不解釋了，大家隨意看看便可：
<style lang="less" scoped>
.container {
.title {
display: flex;
flex-direction: row;
.list_item {
flex-grow: 1;
box-sizing: border-box;
height: 85rpx;
font-size: 32rpx;
text-align: center;
line-height: 85rpx;
border-bottom: 4rpx solid #eee;
}
.on {
border-bottom: 4rpx solid #fe2a7e;
color: #fe2a7e;
}
}
}
</style>
2、資料與事件
（1）頁面所需要的data基本資料：
list activeIndex
data = {
list: ['全款', '待收貨', '待發貨', '已收貨'],
activeIndex: 0
};
（2）將使用者點選傳過來的 index 值賦給data中改變當前的索引值 activeIndex
tabClick(val) {
this.activeIndex = val;
this.$apply();
}
這樣我們就實現了一個簡單選項卡的製作。