Das Miniprogramm realisiert die Navigation der Jiugongge-Schnittstelle

Dieser Artikel stellt hauptsächlich die tatsächliche Praxis der Entwicklung kleiner Programme vor: Die Code-Implementierung zur Realisierung der Navigation der Jiugongge-Schnittstelle Es hat einen gewissen Referenzwert.

Das Miniprogramm wurde auf WeChat entwickelt und ist eine mobile Benutzeroberfläche. Um die Verwendung zu vereinfachen, möchten wir häufig die neuneckige Rasteroberfläche als Navigation verwenden.

Basierend auf einer einfachen Überlegung besteht das Jiugong-Raster aus drei Zeilen und drei Spalten. Wenn die Zeile als Einheit betrachtet wird und jede Zeile in drei Spalten unterteilt ist, ist das in Ordnung? Lass es uns üben.

Betrachten wir zunächst die Generierung von Neun-Gitter-Daten. Jedes Gitter benötigt ein Symbol, einen Titel und eine Route für einfache Sprünge. Wir haben jetzt neun Seiten, also definieren wir einfach ein eindimensionales Array . Um die nachfolgende Konfiguration besser durchführen zu können, trennen wir dieses Array in eine Datei „routes.js“, verweisen dann auf der Seite „index.js“ darauf und legen Routen im Indexverzeichnis ab.

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 
}

Auf der Seite „index.js“ verweisen wir auf „routes.js“ und rufen dann die Daten von „PageItems“ ab, aber „PageItems“ ist ein eindimensionales Array und unsere vorherige Überlegung bestand darin, eine Zeile und drei Spalten als Array zu verwenden Gruppe, also müssen wir dies tun. Der direkteste Weg, eindimensionale Arrays neu zu kombinieren, besteht darin, ein Array mit nur drei Elementen zu generieren. Der Code lautet wie folgt:

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

In index.wxml haben wir überlegt, eine Vorlage zu verwenden, um die Schnittstelle zu gestalten, da jedes Raster gleich ist, die Daten jedoch unterschiedlich sind. Zu diesem Zweck erstellen wir zunächst eine Zellvorlagenoberfläche 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>

Hier sehen wir, dass die von außen eingegebenen Daten in zwei geschweifte Klammern eingeschlossen sind und dann im Inneren einfache logische Urteile getroffen werden können. für eine bessere Präsentation. Wenn beispielsweise text==null ist, möchten wir ein Raster mit einem leeren Hintergrund anzeigen. Wenn Daten vorhanden sind, möchten wir ein Raster mit einem Hintergrund anzeigen, also

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

Ein weiterer Punkt, da wir konvertieren Diese Schnittstelle dient als Vorlage, daher muss sie mit einem Vorlagen-Tag umschlossen und mit einem Namen versehen werden, damit der Aufruf dort identifiziert werden kann, wo auf die Vorlage verwiesen wird. Jetzt referenzieren wir diese Vorlage 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>

Die Vorlage wird über Import referenziert, und template und is werden am Aufrufort verwendet, wobei is den Namen in cell.wxml angibt. item[0], item[1] und item[2] sind die in der Schleife übergebenen Daten, und cellHeight sind die in den Daten von index.js gespeicherten Daten. Wenn Daten an die Vorlage übergeben werden, erweitert das Framework diese in Form von Feldern, also Schlüssel-Wert-Paaren. Wenn Sie sich also die Datei cell.wxml noch einmal ansehen, werden Sie feststellen, dass Schlüssel intern direkt als Daten verwendet werden . Nachdem wir die Daten der Schnittstelle präsentiert haben, benötigen wir einen bestimmten Stil, um sie anzupassen. Der index.wxss-Code lautet wie folgt.

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

Der Effekt ist wie unten gezeigt

Wir verwenden das Navigatorelement in unserer Vorlage, um das Raster darzustellen, sodass in jedem Raster natürlich navigiert werden kann.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Über die Analyse von Datenoperationen und Funktionsaufrufen auf der WeChat Mini-Programmseite

WeChat Miniprogramm Implementierung des Minispiels zum Umdrehen von Karten

WeChat-Applet implementiert die Funktion zur Auswahl einer Stadt anhand von Buchstaben

Das obige ist der detaillierte Inhalt vonDas Miniprogramm realisiert die Navigation der Jiugongge-Schnittstelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!