Code implementation for the navigation on the Jiugongge interface developed by the applet

This article mainly introduces the practice of small program development: it provides some reference value to implement code for navigation on the Jiugongge interface. if you are interested, please take a look. This article mainly introduces the practice of small program development: it provides some reference value to implement code for navigation on the Jiugongge interface. if you are interested, please take a look.

Small programs are long and mobile interfaces. in order to make it easier to use them, we often hope to use the interface as a navigation tool. how can we achieve this?

Based on a simple thought, the nine squares are three rows and three columns. if we use rows as a unit and divide each row into three columns, is that okay? Let's take a look.

First, let's take into account the generation of nine cells of data. Each grid requires an icon, a title, and a route to facilitate the jump. now we have nine pages that day, so define a one-dimensional array. In order to better carry out subsequent configuration, we will separate this array into a file, routes. js, reference it on the index. js page, and put routes under the index directory.

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

In index. we reference routes on the js page. js, and then get the data PageItems, but PageItems is a one-dimensional array, and we previously thought we should use a row and three columns as a group, so we need to re-combine this one-dimensional array, the most direct method is to generate an array. each array element contains a one-dimensional array with only three elements. the code is as follows:

// Index. js // Obtain the application instance var app = getApp () var routes = require ('Routes '); Page ({data: {userInfo :{}, cellHeight: '120px ', pageItems: []}, // Event Processing function onLoad: function () {var that = this console. log (app); // call the method of the application instance to obtain the global data app. getUserInfo (function (userInfo) {wx. setNavigationBarTitle ({title: 'Brand new test tracing system-'+ userInfo. nickName, success: function (res) {// success}) that. setData ({userInfo: userInfo}) var pageItems = []; var row = []; var len = routes. pageItems. length; // restructured 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 restart wwidth = res. required wwidth; that. setData ({cellHeight: (export wwidth/3) + 'px'})}, complete: function () {that. setData ({pageItems: pageItems })}})})}})

In index. wxml, we will layout the interface. because every grid is the same, but the data is different, we want to use templates for presentation. For this reason, we first create a cell template surface cell. wxml.

   
     
       
       
      
       
    
     {{text}}
       
     
   
 

Here we can see that the two braces cover the data imported from the outside, and then we can make a simple logical judgment in it for better presentation. For example, when text = null, we want to present a lattice with an empty background. when there is data, we want to present a lattice with a background, so

The code is as follows:

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

In addition, because we use this interface file as a template, we must use the template tag to wrap it, and at the same time place a name, so that the call can be identified only when the template is referenced. Now we reference this template in index. wxml

The template reference uses import for reference, and the template and is are used for the call, where is specifies the name in cell. wxml. Item [0], item [1], item [2] are input data cyclically, and cellHeight is the data stored in index. js data. When data is passed into the template, the framework expands the data in the form of a field, that is, the key-value pair. wxml file, you will find that the internal uses the key as the data directly. After the data is presented to the interface, we need to combine the appropriate style. 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; }

Results:

In our template, the navigator element is used to present the grid, so each grid can naturally navigate.

The above is the code implementation of the code for the code implementation of the code development interface of the mini-program. For more information, see other related articles in the first PHP community!