微信小程序實戰篇-分類頁面製做

哈嘍，你們好，今天週一了，今天第九程序要教你們微信小程序分類頁面的製做，廢話很少說，先上效果圖。 這個界面佈局難度不是很大，css基礎好的，很快就實現了，分類界面，左邊是一級目錄，右邊是一級目錄對應的二級目錄，根據 這個需求，咱們數據設計的結構必定是數組嵌套數組，第一個數組包含一級目錄數據，嵌套的數組包含的是二級目錄的數據。 代碼的實現 classify.js Page({ data: { cateItems: [ { cate_id: 1, cate_name: "護膚", ishaveChild: true, children: [ { child_id: 1, name: '潔面皂', image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117972563.jpg" }, { child_id: 2, name: '卸妝', image: "http://mz.djmall.xmisp.cn/files/logo/20161207/148110444480.jpg" }, { child_id: 3, name: '潔面乳', image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117973270.jpg" }, { child_id: 4, name: '面部祛角質', image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg" } ] }, { cate_id: 2, cate_name: "彩妝", ishaveChild: true, children: [ { child_id: 1, name: '氣墊bb', image: "http://mz.djmall.xmisp.cn/files/logo/20161212/14815381301.jpg" }, { child_id: 2, name: '修容/高光', image: "http://mz.djmall.xmisp.cn/files/logo/20161212/14815381411.jpg" }, { child_id: 3, name: '遮瑕', image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153815181.jpg" }, { child_id: 4, name: '腮紅', image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153815759.jpg" }, { child_id: 5, name: '粉餅', image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153816983.jpg" }, { child_id: 6, name: '粉底', image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153817721.jpg" }, { child_id: 7, name: '蜜粉/散粉', image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153819354.jpg" }, { child_id: 8, name: '隔離霜', image: "http://mz.djmall.xmisp.cn/files/logo/20161215/148179053369.jpg" } ] }, { cate_id: 3, cate_name: "香水/香氛", ishaveChild: true, children: [ { child_id: 1, name: '淡香水EDT', image: "http://mz.djmall.xmisp.cn/files/logo/20161213/14815978910.jpg" }, { child_id: 2, name: '濃香水EDP', image: "http://mz.djmall.xmisp.cn/files/logo/20161213/148159789883.jpg" }, { child_id: 3, name: '香體走珠', image: "http://mz.djmall.xmisp.cn/files/logo/20161213/14815979307.jpg" }, { child_id: 4, name: '古龍香水男士的最愛', image: "http://mz.djmall.xmisp.cn/files/logo/20161213/148159765589.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 }) } }) js的代碼有點長，可是宏觀看一下邏輯就很清晰了 cateItems 展現的數據 curNav 控制當前那個按鈕點亮 curIndex 根據此參數來拿第幾個分類的數據 switchRightTab 分類tab事件的處理 cateItems裏的數據每個對象都是一個品類的數據，拿第一個品類護膚來講， cate_id 識別的id cate_name 一級分類名稱 ishaveChild 判斷是否有子集 children 二級目錄的數據 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> 這裏面要講解的有 nav_left_items {{curNav == item.cate_id ? 'active' : ''}} 在classify.js代碼中已經說了curNav的做用，就是在這裏實現的 根據是否和一級目錄cate_id相同，來判斷是否點亮文字。相同執行.nav_left_items.active樣式，不相同則執行.nav_left_items樣式 wx:for 和wx: if的知識點,這放在下面講，請繼續往下看 classify.wxss page{ background: #f5f5f5; } /*整體主盒子*/ .container { 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: 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; } 這裏有個小技巧分享給你們 要設置字體垂直居中要腫麼辦吶？ 看我佈局的樣式【.nav_left .nav_left_items】把height與line-height兩個屬性設置成同樣的就能夠輕鬆實現字體垂直居中，可是這個有侷限性，是字體要是單行的，爲何吶，由於line-height自己就是設置行高 單行文字過長部分要用省略號應該如何寫樣式吶？ 效果是醬紫 xxxxx... overflow: hidden; white-space: nowrap; //設置單行顯示 text-overflow: ellipsis; 知識小課堂 wx:for 微信小程序列表的渲染，咱們以前作首頁的時候就有接觸過用於循環數組，展現列表型數據 默認數組的當前項的下標變量名默認爲index，數組當前項的變量名默認爲item <view wx:for="{{items}}"> {{index}}: {{item.message}} </view> 也能夠自定義變量表使用 wx:for-item能夠指定數組當前元素的變量名 使用wx:for-index能夠指定數組當前下標的變量名 <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName"> {{idx}}: {{itemName.message}} </view> wx:if 微信小程序條件渲染，一般是在if裏面寫判斷語句，知足條件就執行這個view控件，一般有if對應就有else，對應的不知足if條件就 執行else對應的view控件。 <view wx:if="{{length > 5}}"> 1 </view> <view wx:elif="{{length > 2}}"> 2 </view> <view wx:else> 3 </view> 咱們要把 wx:if 和 hidden 作對比，他們均可以實現讓控件顯示與隱藏，可是他們有什麼區別吶，if是當知足條件的時候纔會渲染 view，而hidden是view必定會被渲染，只不過控制顯示與隱藏罷了，那麼咱們要如何區分什麼時機用什麼方法吶？ 通常來講，wx:if有更高的切換消耗而hidden有更高的初始渲染消耗。所以，若是須要頻繁切換的情景下，用hidden更好， 若是在運行時條件不大可能改變則wx:if較好。 總結 好了，分類頁面的製做完成了，今天新增一個知識小課堂，目的很簡單，就是想把涉及到的知識要點歸類整理，方便讀者查閱。