<!--主盒子-->
<view class="con">
?<!--左側欄-->
?<view class="nav_left">
? ?<block wx:for="{{cateItems}}" wx:key="*this">
? ? ?<!--當前項的id等于item項的id，那個就是當前狀態(tài)-->
? ? ?<!--用data-index記錄這個數(shù)據(jù)在數(shù)組的下標位置，使用data-id設置每個item的id值，供打開2級頁面使用-->
? ? ?<view class="nav_left_items {{curNav == item.cate_id ? 'active' : ''}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.cate_id}}">{{item.cate_name}}</view>
? ?</block>
?</view>
?<!--右側欄-->
?<view class="nav_right">
? ?<!--如果有數(shù)據(jù)，才遍歷項-->
? ?<view wx:if="{{cateItems[curIndex].ishaveChild}}">
? ? ?<block wx:for="{{cateItems[curIndex].children}}" wx:key="value">
? ? ? ?<view class="nav_right_items">
? ? ? ?<!--界面跳轉 -->
? ? ? ? ?<navigator url="../../detail/detail">
? ? ? ? ? ?<image src="{{item.image}}"></image>
? ? ? ? ? ?<text>{{item.name}}</text>
? ? ? ? ?</navigator>
? ? ? ?</view>
? ? ?</block>
? ?</view>
? ?<!--如果無數(shù)據(jù)，則顯示數(shù)據(jù)-->
? ?<view class="nodata_text" wx:else>該分類暫無數(shù)據(jù)</view>
?</view>
</view>

page{ ?
? background: #f5f5f5; ?
} ?
/*總體主盒子*/ ?
.con { ?
? position: relative; ?
? width: 100%; ?
? height: 100%; ?
? background-color: #fff; ?
? color: #939393; ?
}
?/*左側欄主盒子*/ ?
.nav_left{ ?
? /*設置行內塊級元素（沒使用定位）*/ ?
? display: inline-block; ?
? width: 25%; ?
? height: 100%; ?
? /*主盒子設置背景色為灰色*/ ?
? background: #f5f5f5; ?
? text-align: center; ?
} ?
/*左側欄list的item*/ ?
.nav_left .nav_left_items{ ?
? /*每個高30px*/ ?
? height: 40px; ?
? /*垂直居中*/ ?
? line-height: 40px; ?
? /*再設上下padding增加高度，總高42px*/ ?
? padding: 6px 0; ?
? /*只設下邊線*/ ?
? border-bottom: 1px solid #dedede; ?
? /*文字14px*/ ?
? font-size: 14px;?
} ?
/*左側欄list的item被選中時*/ ?
.nav_left .nav_left_items.active{ ?
? /*背景色變成白色*/ ?
? background: #fff; ?
? color: #f0145a;?
} ?
/*右側欄主盒子*/ ?
.nav_right{ ?
? /*右側盒子使用了絕對定位*/ ?
? position: absolute; ?
? top: 0; ?
? right: 0; ?
? flex: 1; ?
? /*寬度75%，高度占滿，并使用百分比布局*/ ?
? width: 75%; ?
? height: 1000px; ?
? padding: 10px; ?
? box-sizing: border-box; ?
? background: #fff; ?
} ?
/*右側欄list的item*/ ?
.nav_right .nav_right_items{ ?
? /*浮動向左*/ ?
? float: left; ?
? /*每個item設置寬度是33.33%*/ ?
? width: 33.33%; ?
? height: 94px; ?
? text-align: center; ?
} ?
.nav_right .nav_right_items image{ ?
? /*被圖片設置寬高*/ ?
? width: 60px; ?
? height: 50px; ??
} ?
.nav_right .nav_right_items text{ ?
? /*給text設成塊級元素*/ ?
? display: block; ??
? font-size: 14px; ?
? color: black;
? /*設置文字溢出部分為...*/ ?
? overflow: hidden; ?
? white-space: nowrap; ?
? text-overflow: ellipsis; ?
}?
.nodata_text
{
? color:#000;
? font-size: 14px; ?
? text-align: center; ?
}?

Page({
? data: {
? ? cateItems: [
? ? ? {
? ? ? ? cate_id: 1,
? ? ? ? cate_name: "列表一",
? ? ? ? ishaveChild: true,
? ? ? ? children:
? ? ? ? ? [
? ? ? ? ? ? {
? ? ? ? ? ? ? child_id: 1,
? ? ? ? ? ? ? name: 'ssd',
? ? ? ? ? ? ? image: "../../images/1.jpg"
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? child_id: 2,
? ? ? ? ? ? ? name: 'fff',
? ? ? ? ? ? ? image: "../../images/2.jpg"
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? child_id: 3,
? ? ? ? ? ? ? name: 'ghf',
? ? ? ? ? ? ? image: "../../images/3.jpg"
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? child_id: 4,
? ? ? ? ? ? ? name: 'gergr',
? ? ? ? ? ? ? image: "../../images/4.jpg"
? ? ? ? ? ? }
? ? ? ? ? ]
? ? ? },
? ? ? {
? ? ? ? cate_id: 2,
? ? ? ? cate_name: "列表二",
? ? ? ? ishaveChild: true,
? ? ? ? children:
? ? ? ? ? [
? ? ? ? ? ? {
? ? ? ? ? ? ? child_id: 1,
? ? ? ? ? ? ? name: 'eryt',
? ? ? ? ? ? ? image: "../../images/2.jpg"
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? child_id: 2,
? ? ? ? ? ? ? name: '3dwag',
? ? ? ? ? ? ? image: "../../images/3.jpg"
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? child_id: 3,
? ? ? ? ? ? ? name: 'hrtht',
? ? ? ? ? ? ? image: "../../images/2.jpg"
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? child_id: 4,
? ? ? ? ? ? ? name: 'ydtjy',
? ? ? ? ? ? ? image: "../../images/6.jpg"
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? child_id: 5,
? ? ? ? ? ? ? name: 'yjtdyt',
? ? ? ? ? ? ? image: "../../images/3.jpg"
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? child_id: 6,
? ? ? ? ? ? ? name: 'aerf',
? ? ? ? ? ? ? image: "../../images/4.jpg"
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? child_id: 7,
? ? ? ? ? ? ? name: 'gerg',
? ? ? ? ? ? ? image: "../../images/2.jpg"
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? child_id: 8,
? ? ? ? ? ? ? name: 'jytj',
? ? ? ? ? ? ? image: "../../images/1.jpg"
? ? ? ? ? ? }
? ? ? ? ? ]
? ? ? },
? ? ? {
? ? ? ? cate_id: 3,
? ? ? ? cate_name: "列表三",
? ? ? ? ishaveChild: true,
? ? ? ? children:
? ? ? ? ? [
? ? ? ? ? ? {
? ? ? ? ? ? ? child_id: 1,
? ? ? ? ? ? ? name: 'jtytyj',
? ? ? ? ? ? ? image: "../../images/3.jpg"
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? child_id: 2,
? ? ? ? ? ? ? name: 'tyjfyj',
? ? ? ? ? ? ? image: "../../images/6.jpg"
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? child_id: 3,
? ? ? ? ? ? ? name: 'tuyfuk',
? ? ? ? ? ? ? image: "../../images/4.jpg"
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? child_id: 4,
? ? ? ? ? ? ? name: 'seyu5trd',
? ? ? ? ? ? ? image: "../../images/3.jpg"
? ? ? ? ? ? }
? ? ? ? ? ]
? ? ? },
? ? ? {
? ? ? ? cate_id: 4,
? ? ? ? cate_name: "列表四",
? ? ? ? ishaveChild: false,
? ? ? ? children: []
? ? ? }
? ? ],
? ? curNav: 1,
? ? curIndex: 0
? },

? //事件處理函數(shù) ?
? switchRightTab: function (e) {
? ? console.log(e)
? ? // 獲取item項的id，和數(shù)組的下標值 ?
? ? let id = e.target.dataset.id,
? ? index = parseInt(e.target.dataset.index);
? ? // 把點擊到的某一項，設為當前index ?
? ? this.setData({
? ? ? curNav: id,
? ? ? curIndex: index
? ? })
? }
})