本篇文章主要介紹了小程式開發實戰:實現九宮格介面的導航的程式碼實現,具有一定的參考價值,有興趣的可以了解一下。
小程式是長在微信上的,是行動端的介面,為了能夠更方便的使用,我們常常希望使用九宮格介面的方式作為導航,那要如何實現呢?
基於一個簡單的思考,九宮格就是三行三列,如果把行當作一個單位,再將每一行分成三列,那是不是就可以了?我們實踐一下。
首先來考慮九宮格資料的生成,每一個格子需要有一個圖示、一個標題、一個方便跳躍的路由,那天現在我們有九個頁面,所以定義一個一維數組即可。為了更好的進行後續的配置,我們將這個陣列獨立到一個檔案中routes.js,然後將其在index.js頁面中引用,routes放到index的目錄下。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
|
在index.js頁面中我們引用routes.js,然後得到資料PageItems,但PageItems是一維數組,而我們前面思考是要用一行三列為一個組的,所以需要將這一維數組重新組合,最直接的方法就是產生一個數組,每個數組的元素又包含了一個只有三個元素的一維數組,代碼如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
|
在index.wxml中,我們來佈局介面,由於每個格子都是一樣的,只是資料不一樣,所以想到用模板來呈現。為此,我們先做一個單元格的模板面cell.wxml.
1 2 3 4 5 6 7 8 9 10 |
|
這裡看到兩個大括號內套的是從外面傳入的數據,然後在裡面可以進行簡單的邏輯判斷,以便於更好的呈現。例如text==null的時候,我們希望呈現的是一個空背景的格子,在有資料的時候我們希望呈現一個含背景的格子,所以
程式碼如下:
1 |
|
另外一點,由於我們是將該介面檔案當作模板的,所以必須要用template標記來包住,同時命一個名字name,這樣在引用模板的地方才可以辨識呼叫。 現在我們在index.wxml中引用這個模板
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
模板的引用使用import來引用,在呼叫的地方使用template和is,其中is指定的是cell.wxml中的name。 item[0]、item[1]、item[2]是循環傳入的資料,cellHeight是在index.js的data中存放的資料。將資料傳入至範本內部時,框架會將其展開在欄位的形式,即key-value對,所以再看cell.wxml文件,就會發現內部是直接使用key來作為數據的。 將資料呈現到介面之後,我們需要相當的樣式來配合,index.wxss程式碼如下。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
|
效果如下圖
我們模板中使用navigator元素來呈現格子,所以每個格子自然就可以導航了。
以上是小程式開發九宮格介面的導航的程式碼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!