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

Source: Internet
Author: User
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!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.