微信小程式-仿京東左側分類
阿新 • • 發佈:2019-01-24
classify.js
const app = getApp() Page({ /** * 頁面的初始資料 */ data: { cateItems: [ { cate_id: 1, cate_name: "護膚", ishaveChild: true, children: [ { child_id: 1, name: '潔面皂', image: "../../images/1.jpg" }, { child_id: 2, name: '卸妝', image: "../../images/2.jpg" } ] }, { cate_id: 2, cate_name: "彩妝", ishaveChild: true, children: [ { child_id: 1, name: '氣墊bb', image: "../../images/3.png" }, { child_id: 2, name: '修容/高光', image: "../../images/4.jpg" }, { child_id: 3, name: '遮瑕', image: "../../images/5.jpg" } ] }, { cate_id: 3, cate_name: "香水/香氛", ishaveChild: true, children: [ { child_id: 1, name: '淡香水EDT', image: "../../images/6.jpg" } ] }, { cate_id: 4, cate_name: "個人護理", ishaveChild: false, children: [] } ], curNav: 1, curIndex: 0 }, //事件處理函式 switchRightTab: function (e) { // 獲取item項的id,和陣列的下標值 let id = e.target.dataset.id, index = parseInt(e.target.dataset.index); // 把點選到的某一項,設為當前index this.setData({ curNav: id, curIndex: index }) }, /** * 生命週期函式--監聽頁面載入 */ onLoad: function (options) { }, /** * 生命週期函式--監聽頁面初次渲染完成 */ onReady: function () { }, /** * 生命週期函式--監聽頁面顯示 */ onShow: function () { }, /** * 生命週期函式--監聽頁面隱藏 */ onHide: function () { }, /** * 生命週期函式--監聽頁面解除安裝 */ onUnload: function () { }, /** * 頁面相關事件處理函式--監聽使用者下拉動作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函式 */ onReachBottom: function () { }, /** * 使用者點選右上角分享 */ onShareAppMessage: function () { } })
classify.wxml
<!--主盒子--> <view class="container"> <!--左側欄--> <view class="nav_left"> <block wx:for="{{cateItems}}"> <!--當前項的id等於item項的id,那個就是當前狀態--> <!--用data-index記錄這個資料在陣列的下標位置,使用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"> <!--如果有資料,才遍歷項--> <view wx:if="{{cateItems[curIndex].ishaveChild}}"> <block wx:for="{{cateItems[curIndex].children}}"> <view class="nav_right_items"> <!--介面跳轉 --> <navigator url="../../detail/detail}}"> <image src="{{item.image}}"></image> <text>{{item.name}}</text> </navigator> </view> </block> </view> <!--如果無資料,則顯示資料--> <view class="nodata_text" wx:else>該分類暫無資料</view> </view> </view>
classify.wxss
page{ background: #f5f5f5; } /*總體主盒子*/ .container { position: absolute; width: 100%; height: 100%; background-color: #fff; color: #939393; } /*左側欄主盒子*/ .nav_left{ /*設定行內塊級元素(沒使用定位)*/ position: absolute; top: 0;left: 0; width: 25%; height: 100%; /*主盒子設定背景色為灰色*/ background: #f5f5f5; text-align: center; } /*左側欄list的item*/ .nav_left .nav_left_items{ /*每個高30px*/ height: 40px; /*垂直居中*/ line-height: 40px; /*再設上下padding增加高度,總高42px*/ /*只設下邊線*/ border-bottom: 1px solid #dedede; /*文字14px*/ font-size: 14px; } /*左側欄list的item被選中時*/ .nav_left .nav_left_items.active{ /*背景色變成白色*/ background: white; 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: 120px; text-align: center; } .nav_right .nav_right_items image{ /*被圖片設定寬高*/ width: 60px; height: 60px; margin-top: 15px; } .nav_right .nav_right_items text{ /*給text設成塊級元素*/ display: block; margin-top: 15px; font-size: 14px; color: black; /*設定文字溢位部分為...*/ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .nodata_text { color: black; font-size: 14px; text-align: center; }
文章轉自https://blog.csdn.net/u012927188/article/details/73650264 ,不過他的有個小BUG,。nav-left{加上position:absolue;top:0;left:0}就行了