Code implementation of navigation for mini program development Jiugongge interface

This article mainly introduces the actual practice of small program development: the code implementation of navigation to realize the Jiugongge interface. It has certain reference value. Those who are interested can learn about it.

Mini programs are developed on WeChat and are mobile interfaces. In order to make them more convenient to use, we often want to use the nine-square grid interface as navigation. How to achieve this?

Based on a simple thinking, the Jiugong grid is three rows and three columns. If the row is regarded as a unit and each row is divided into three columns, is that okay? Let's practice it.

First consider the generation of nine-grid data. Each grid needs an icon, a title, and a route for easy jump. We now have nine pages that day, so we define a One-dimensional array is enough. In order to better perform subsequent configuration, we separate this array into a file routes.js, then reference it in the index.js page, and put routes in the index directory.

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 
}

In the index.js page, we reference routes.js, and then get the data PageItems, but PageItems is a one-dimensional array, and our previous thinking was to use one row and three columns as a group, so we need to put this The most direct way to recombine one-dimensional arrays is to generate an array. Each array element contains a one-dimensional array with only three elements. The code is as follows

//index.js 
//获取应用实例 
var app = getApp() 
var routes = require('routes'); 
Page({ 
 data: { 
  userInfo: {}, 
  cellHeight: '120px', 
  pageItems: [] 
 }, 
 //事件处理函数 
 onLoad: function () { 
  var that = this 
  console.log(app); 
  //调用应用实例的方法获取全局数据 
  app.getUserInfo(function (userInfo) { 
   wx.setNavigationBarTitle({ 
    title: '全新测试追踪系统-' + 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) + &#39;px&#39; 
     }) 
    }, 
    complete: function () { 
     that.setData({ 
      pageItems: pageItems 
     }) 
    } 
   }) 
  }) 
 } 
})

In index.wxml, we Let’s lay out the interface. Since each grid is the same, but the data is different, I thought of using a template to present it. To this end, we first make a cell template cell.wxml.

<template name="cell"> 
 <navigator url="{{route}}" class="pages-item" style="height:{{cellHeight}}"> 
  <view class="{{text==null||text.length==0?&#39;pages-icon-wrapper-no-bg&#39;:&#39;pages-icon-wrapper&#39;}}" > 
   <image src="{{icon}}" class="pages-icon"></image> 
  </view> 
  <view class="pages-text-wrapper"> 
   <text class="pages-text">{{text}}</text> 
  </view> 
 </navigator> 
</template>

Here we see that the data passed in from the outside is enclosed in the two curly brackets, and then simple logical judgments can be made inside. , for better presentation. For example, when text==null, we want to present a grid with an empty background. When there is data, we want to present a grid with a background, so

the code is as follows:

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

Another point, since we use this interface file as a template, we must wrap it with the template tag and give it a name so that the call can be identified where the template is referenced. Now we reference this template in index.wxml

<!--index.wxml--> 
<import src="cell.wxml" /> 
<view class="pages-container"> 
 <scroll-view scroll-y="true" class="pages-wrapper"> 
  <view wx:for="{{pageItems}}" wx:key="{{text}}"> 
   <view class="pages-row"> 
    <template is="cell" data="{{...item[0],cellHeight}}" /> 
    <template is="cell" data="{{...item[1],cellHeight}}" /> 
    <template is="cell" data="{{...item[2],cellHeight}}" /> 
   </view> 
  </view> 
 </scroll-view> 
</view>

The reference of the template is referenced using import, and template and is are used at the call place, where is specifies the name in cell.wxml. item[0], item[1], and item[2] are the data passed in by loop, and cellHeight is the data stored in the data of index.js. When data is passed into the template, the framework will expand it in the form of fields, that is, key-value pairs. So if you look at the cell.wxml file again, you will find that the key is used directly as the key. data. After presenting the data to the interface, we need a certain style to match it. The index.wxss code is as follows.

/**index.wxss**/ 
.pages-container { 
 height: 100%; 
 display: flex; 
 flex-direction: column; 
 box-sizing: border-box; 
 padding-top: 10rpx; 
 padding-bottom: 10rpx; 
} 
.pages-title-bg { 
 width: 100%; 
} 
.pages-wrapper { 
} 
.pages-row { 
 width: 100%; 
 display: flex; 
 flex-direction: row; 
 justify-content: space-around; 
} 
.pages-item { 
 position: relative; 
 padding: 10rpx; 
 width: 33%; 
 background-color: #fff; 
 border: #ddd solid 1px; 
} 
.pages-icon-wrapper { 
 display: flex; 
 justify-content: space-around; 
 align-items: center; 
 margin: 10rpx; 
 border-radius: 30%; 
 height: 75%; 
 background:#00CD0D; 
} 
.pages-icon-wrapper-no-bg { 
 display: flex; 
 justify-content: space-around; 
 align-items: center; 
 margin: 10rpx; 
 height: 75%; 
} 
.pages-icon { 
 width: 100rpx; 
 height: 100rpx; 
} 
.pages-text-wrapper { 
 text-align: center; 
} 
.pages-text { 
 font-weight: bolder; 
}

The effect is as shown below

We use the navigator element in our template to present the grid, so each grid can naturally be navigated.

The above is the detailed content of Code implementation of navigation for mini program development Jiugongge interface. For more information, please follow other related articles on the PHP Chinese website!