目的：tab選項卡

知識點：

1、flex佈局；

2、資料繫結；

3、條件渲染；

4、列表渲染；

5、事件；

第一步：設定json資料

由於都是自己本地寫，沒用介面資料，所以在data裡面自己寫了一個數據：

data:{ "tabView":[ { "id": 10001, "title": "優酷視訊", "tree":[ { "id": 10001001, "title": "優酷綜藝" }, { "id": 10001002, "title": "優酷電影" }, { "id": 10001003, "title": "優酷電視劇" } ] }, { "id": 10002, "title": "騰訊視訊", "tree": [ { "id": 10002001, "title": "騰訊綜藝" }, { "id": 10002002, "title": "騰訊電影" }, { "id": 10002003, "title": "騰訊電視劇" } ] }, { "id": 10003, "title": "芒果視訊", "tree": [ { "id": 10003001, "title": "芒果綜藝" }, { "id": 10003002, "title": "芒果電影" }, { "id": 10003003, "title": "芒果電視劇" } ] } ], "curNavIndex":0 }

總共三個類別的資料，curNavIndex是判斷點選切換時用的。

第二步：寫wxml程式碼

<view class="tabNavs"> <view wx:for="{{tabView}}" wx:for-item="item" wx:key="{{tabNavs}}" wx:for-index="index" data-index="{{index}}" data-id="{{item.id}}" class='tabNavItem {{curNavIndex == index?"active":""}}' bindtap="tabNavChange">{{item.title}}</view> </view> <view class='tabContentItems'> <block wx:if="{{tabView[curNavIndex].tree}}"> <view class='tabContentItem' wx:for="{{tabView[curNavIndex].tree}}" wx:key="{{tabItem}}" wx:for-item="item"> <view>id:{{item.id}}</view> <view>title:{{item.title}}</view> </view> </block> <block wx:else> <view>no data</view> </block> </view>

第三步：完善js程式碼

tabNavChange:function(res){ var that = this; console.log(res.target.dataset.index); console.log(res.target.dataset.id); let index = res.target.dataset.index; that.setData({ curNavIndex: index }) }

也就加了一個點選事件

第四步：wxss程式碼

.tabNavs{ display: flex; flex-direction: row; } .tabNavItem{ flex: 1; background: #fff; color: #000; text-align: center; font-size: 16px; line-height: 40px; border-bottom: 1px solid #000; } .active{ background: yellowgreen; border-bottom-color: gold; } .tabContentItem{ background: #dedede; margin: 10px 0; }

tips：沒有怎麼具體去修飾頁面，各位大神不要嫌棄，有什麼問題請隨時聯絡我

另提供這個demo的原始碼地址：https://gitee.com/HeiMiaoZhongXiao/wxTab