Mini program realizes navigation of Jiugongge interface

This article mainly introduces the actual practice of small program development: the code implementation to realize the navigation of 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 jumps. We now have nine pages that day, so just define a one-dimensional array. 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 To 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

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

Another point, since we are converting the interface The file serves as a template, so it must be wrapped with a template tag and given 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 the 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 keys are used directly as data internally. 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 entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About the analysis of data data operations and function calls in WeChat Mini Program Page

WeChat Mini Program Implementation of the card flipping mini-game

WeChat mini program implements the function of selecting a city based on letters

The above is the detailed content of Mini program realizes navigation of Jiugongge interface. For more information, please follow other related articles on the PHP Chinese website!