Code-Implementierung der Navigation für die Jiugongge-Schnittstelle zur Entwicklung von Miniprogrammen

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

Das Miniprogramm wurde auf WeChat entwickelt und ist eine mobile Schnittstelle. Um die Nutzung 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, um das Springen zu erleichtern, also definieren wir ein eindimensionales ArrayDas ist es. Für eine bessere spätere Konfiguration trennen wir dieses Array in eine Datei „routes.js“, verweisen dann auf der Seite „index.js“ darauf und legen „routes“ 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. „PageItems“ ist jedoch ein eindimensionales Array und unsere vorherige Überlegung bestand darin, eine Zeile und drei Spalten zu verwenden Als Gruppe benötigen wir also Der direkteste Weg, dieses eindimensionale Array 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 
     }) 
    } 
   }) 
  }) 
 } 
})

im Index. Da jedes Raster gleich ist, die Daten jedoch unterschiedlich sind, haben wir darüber nachgedacht, eine Vorlage zur Darstellung zu verwenden. 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 die beiden geschweiften Klammern eingeschlossen sind und dann einfache Operationen ausgeführt werden können innen Logisches Urteil zur besseren Darstellung. Wenn beispielsweise text==null ist, möchten wir ein Raster mit einem leeren Hintergrund darstellen. Wenn Daten vorhanden sind, möchten wir ein Raster mit einem Hintergrund darstellen, also

Der Code lautet wie folgt:

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

Ein weiterer Punkt: Da wir diese Schnittstellendatei als Vorlage verwenden, müssen wir sie mit dem Vorlagen-Tag umschließen und ihr einen Namen geben, 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 Referenz der 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 von der -Schleife übergebenen Daten, und cellHeight sind die in den Daten von index.js gespeicherten Daten. Wenn die Daten an die Vorlage übergeben werden, werden sie vom Framework in Form von Feldern, also Schlüssel-Wert-Paaren, erweitert. Wenn Sie sich also die Datei cell.wxml noch einmal ansehen, werden Sie das feststellen Der Schlüssel wird direkt als Schlüssel verwendet. Nachdem wir die Daten der Schnittstelle präsentiert haben, benötigen wir einen bestimmten Stil, der dazu passt. 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 detaillierte Inhalt vonCode-Implementierung der Navigation für die Jiugongge-Schnittstelle zur Entwicklung von Miniprogrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!