WeChat mini-app jiugongge instance code, mini-app jiugong

The code of the mini-app jiugongge instance and the mini-app jiugong

Mini-app

Implementation:

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.

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

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 "{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

<!--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 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; } 

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

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!