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) + 'px' }) }, complete: function () { that.setData({ pageItems: pageItems }) } }) }) } })
<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>
"{{text==null||text.length==0?'pages-icon-wrapper-no-bg':'pages-icon-wrapper'}}".
<!--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>
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; }
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!