Le mini programme réalise la navigation de l'interface Jiugongge

Cet article présente principalement la pratique réelle du développement de petits programmes : l'implémentation du code pour réaliser la navigation de 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 de 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à, il suffit donc d'en définir une. tableau dimensionnel. Afin de mieux effectuer la 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 d'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 Quand il y a des données, on veut présenter une grille avec un fond, donc

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

Autre point, puisque nous avons. sont en cours de conversion Ce fichier d'interface sert de modèle, il doit donc être entouré d'une balise de modèle et lui donner un nom afin 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 dans 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 les clés sont utilisées directement comme données en interne. . Après avoir présenté les données à l'interface, nous avons besoin d'un certain style pour les faire 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 représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de l'analyse des opérations de données et des appels de fonction dans la page du programme WeChat Mini

WeChat Mini programme Mise en œuvre du mini-jeu de retournement de cartes

L'applet WeChat implémente la fonction de sélection d'une ville en fonction des lettres

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!