国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

如意小程序開發(fā)實戰(zhàn):實現(xiàn)九宮格界面的導(dǎo)航

mindwind / 3227人閱讀

摘要:將數(shù)據(jù)呈現(xiàn)到界面之后,我們需要相當(dāng)?shù)臉邮絹砼浜希a如下。效果如下圖我們模板中使用元素來呈現(xiàn)格子,所以每個格子自然就可以導(dǎo)航了。

作者:如意
來自:授權(quán)地址
轉(zhuǎn)自:微信小程序聯(lián)盟?

小程序是長在微信上的,是移動端的界面,為了能夠更方便的使用,我們常常希望使用九宮格界面的方式作為導(dǎo)航,那要如何實現(xiàn)呢?

基于一個簡單的思考,九宮格就是三行三列,如果把行作為一個單位,再將每一行分成三列,那是不是就可以了?我們實踐一下。

首先來考慮九宮格數(shù)據(jù)的生成,每一個格子需要有一個圖標(biāo)、一個標(biāo)題、一個便于跳轉(zhuǎn)的路由,那天現(xiàn)在我們有九個頁面,所以定義一個一維數(shù)組即可。為了更好的進(jìn)行后續(xù)的配置,我們將這個數(shù)組獨立到一個文件中routes.js,然后將其在index.js頁面中引用,routes放到index的目錄下。

var PageItems =  
  [  
    {  
      text: "格子1",  
      icon: "../../images/c1.png",  
      route: "../c1/c1",  
    },  
    {  
      text: "格子2",  
      icon: "../../images/c2.png",  
      route: "../c2/c2",  
    },  
     {  
      text: "格子3",  
      icon: "../../images/c3.png",  
      route: "../c3/c3",  
    },  
    {  
      text: "格子4",  
      icon: "../../images/c4.png",  
      route: "../c4/c4",  
    },  
    {  
      text: "格子5",  
      icon: "../../images/c5",  
      route: "../c5/c5",  
    },  
    {  
      text: "格子6",  
      icon: "../../images/c6.png",  
      route: "../c6/c6",  
    },  
    {  
      text: "格子7",  
      icon: "../../images/c7.png",  
      route: "../c7/c7",  
    },  
    {  
      text: "格子8",  
      icon: "../../images/c8",  
      route: "../c8/c8",  
    },  
    {  
      text: "格子9",  
      icon: "../../images/c9.png",  
      route: "../c9/c9",  
    }  
  ];  
module.exports = {  
  PageItems: PageItems  
} 

在index.js頁面中我們引用routes.js,然后得到數(shù)據(jù)PageItems,但PageItems是一維數(shù)組,而我們前面思考是要用一行三列為一個組的,所以需要將這一維數(shù)組進(jìn)行重新組合,最直接的方法就是生成一個數(shù)組,每個數(shù)組的元素又包含了一個只有三個元素的一維數(shù)組,代碼如下?

//index.js  
//獲取應(yīng)用實例  
var app = getApp()  
var routes = require("routes");  
Page({  
  data: {  
    userInfo: {},  
    cellHeight: "120px",  
    pageItems: []  
  },  
  //事件處理函數(shù)  
  onLoad: function () {  
    var that = this  
    console.log(app);  
    //調(diào)用應(yīng)用實例的方法獲取全局?jǐn)?shù)據(jù)  
    app.getUserInfo(function (userInfo) {  
      wx.setNavigationBarTitle({  
        title: "全新測試追蹤系統(tǒng)-" + userInfo.nickName,  
        success: function (res) {  
          // success  
        }  
      })  
      that.setData({  
        userInfo: userInfo  
      })  
      var pageItems = [];  
      var row = [];  
      var len = routes.PageItems.length;//重組PageItems  
      len = Math.floor((len + 2) / 3) * 3;  
      for (var i = 0; i < len; i++) {  
        if ((i + 1) % 3 == 0) {  
          row.push(indexs.PageItems[i]);  
          pageItems.push(row);  
          row = [];  
          continue;  
        }  
        else {  
          row.push(indexs.PageItems[i]);  
        }  
      }  
      wx.getSystemInfo({  
        success: function (res) {  
          var windowWidth = res.windowWidth;  
          that.setData({  
            cellHeight: (windowWidth / 3) + "px"  
          })  
        },  
        complete: function () {  
          that.setData({  
            pageItems: pageItems  
          })  
        }  
      })  
    })  
  }  
}) 

在index.wxml中,我們來布局界面,由于每一個格子都是一樣的,只是數(shù)據(jù)不一樣,所以想到用模板來呈現(xiàn)。為此,我們先做一個單元格的模板面cell.wxml.

 

這里看到兩個大括號內(nèi)套的是從外面?zhèn)魅氲臄?shù)據(jù),然后在里面可以進(jìn)行簡單的邏輯判斷,以便于更好的呈現(xiàn)。比如text==null的時候,我們希望呈現(xiàn)的是一個空背景的格子,在有數(shù)據(jù)的時候我們希望呈現(xiàn)一個含背景的格子,所以

"{{text==null||text.length==0?"pages-icon-wrapper-no-bg":"pages-icon-wrapper"}}".

另外一點,由于我們是將該界面文件作為模板的,所以必須要用template標(biāo)記來包住,同時命一個名字name,這樣在引用模板的地方才可以識別調(diào)用。
現(xiàn)在我們在index.wxml中引用這個模板