Implémentation du code de navigation pour le développement de mini-programmes Interface Jiugongge

Cet article présente principalement la pratique réelle du développement de petits programmes : l'implémentation du code de navigation pour l'interface Jiugongge. Il a une certaine valeur de référence. Ceux qui sont intéressés peuvent en apprendre davantage.

Le mini programme est développé sur WeChat et est une interface mobile Afin de le rendre plus pratique à utiliser, nous souhaitons souvent utiliser l'interface de grille à neuf carrés comme navigation.

Basé sur une réflexion simple, la grille Jiugong est composée de trois lignes et trois colonnes. Si la ligne est considérée comme une unité et que chaque ligne est divisée en trois colonnes, est-ce que ça va ? Pratiquons-le.

Tout d'abord, considérons la génération de données sur neuf grilles. Chaque grille a besoin d'une icône, d'un titre et d'un itinéraire pour faciliter le saut. Nous avons maintenant neuf pages ce jour-là, nous en définissons donc une . -tableau dimensionnelC'est tout. Pour une meilleure configuration ultérieure, nous séparons ce tableau dans un fichier routes.js, puis le référençons dans la page index.js, et mettons les routes dans le répertoire index.

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 
}

Dans la page index.js, nous référençons routes.js, puis obtenons les données PageItems, mais PageItems est un tableau unidimensionnel, et notre pensée précédente était d'utiliser une ligne et trois colonnes en tant que groupe, nous avons donc besoin du moyen le plus direct de recombiner ce tableau unidimensionnel est de générer un tableau. Chaque élément du tableau contient un tableau unidimensionnel avec seulement trois éléments. Le code est le suivant

//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 
     }) 
    } 
   }) 
  }) 
 } 
})

<.> dans index. En wxml, nous disposons l'interface Comme chaque grille est la même, mais les données sont différentes, nous avons pensé à utiliser un modèle pour la présenter. À cette fin, nous créons d'abord une surface de modèle de cellule 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>

Ici, nous voyons que les données transmises de l'extérieur sont placées entre les deux accolades, puis des opérations simples peuvent être effectuées à l'intérieur Jugement logique pour une meilleure présentation. Par exemple, lorsque text==null, on veut présenter une grille avec un fond vide Lorsqu'il y a des données, on veut présenter une grille avec un fond, donc

Le code est le suivant :

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

Autre point, puisque nous utilisons ce fichier d'interface comme modèle, nous devons l'envelopper avec la balise template et lui donner un nom pour que l'appel puisse être identifié là où le modèle est référencé. Maintenant, nous référençons ce modèle dans 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>

La référence du modèle est référencée à l'aide de l'importation, et le modèle est utilisé au lieu de l'appel, où il spécifie le nom dans cell.wxml. item[0], item[1] et item[2] sont les données transmises par la

boucle, et cellHeight sont les données stockées dans les données d'index.js. Lorsque les données sont transmises au modèle, le framework les développera sous forme de champs, c'est-à-dire de paires clé-valeur. Donc, si vous regardez à nouveau le fichier cell.wxml, vous constaterez que. la clé est utilisée directement comme clé. Après avoir présenté les données à l'interface, nous avons besoin d'un certain style pour y correspondre. Le code index.wxss est le suivant.

/**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; 
}

L'effet est comme indiqué ci-dessous

Nous utilisons l'élément navigateur dans notre modèle pour présenter la grille, de sorte que chaque grille puisse être naturellement parcourue .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!