Informationen zur Verwendung von tabBar-Vorlagen im WeChat-Miniprogramm (ausführliches Tutorial)

In diesem Artikel wird hauptsächlich die Verwendung der tabBar-Vorlage des WeChat-Applets vorgestellt und die Definition, Konfiguration, Referenz und andere damit verbundene Bedienungsfähigkeiten der tabBar-Vorlage anhand spezifischer Beispiele analysiert

Die Beispiele in diesem Artikel werden erklärt. Erfahren Sie, wie Sie die tabBar-Vorlage des WeChat-Miniprogramms verwenden. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Wie wir alle wissen, öffnet die TabBar des WeChat-Applets eine neue Seite und das WeChat-Dokument zeigt, dass nur bis zu 5 Seiten geöffnet werden können. Dies kann leicht zu Problemen führen. Was ist, wenn ich 5 tabBars habe? Das Folgende sind die ursprünglichen Worte von WeChat:

Eine Anwendung kann nur 5 Seiten gleichzeitig öffnen. Nachdem 5 Seiten geöffnet wurden, wx.navigateTo können neue Seiten nicht normal geöffnet werden. Bitte vermeiden Sie mehrstufige Interaktionen oder verwenden Sie wx.redirectTo

. Daher habe ich in diesen Tagen darüber nachgedacht, Vorlagen basierend auf dem WeChat tabBar-Array für Seitenaufrufe anzupassen. Allerdings habe ich jedem Objekt in der Liste eine selectedColor und aktive Attribute hinzugefügt, um die Gestaltung der aktuellen Seite jeder tabBar zu erleichtern. Wenn sie nicht übergeben werden, wird die festgelegte selectedColor direkt verwendet. Daher kann diese Datenzeichenfolge nur unter jeder Seite und nicht unter der öffentlichen app.js-Konfigurationsdatei festgelegt werden. Sie ist im Code etwas überflüssig. Beim nächsten Mal werde ich untersuchen, wie man sie direkt in der App konfiguriert. js.

Erstellen Sie einfach eine neue tarBar.wxml-Vorlagenseite und übergeben Sie dann die Daten von der Seite, die auf die Vorlage verweist. Der Code lautet wie folgt:

<template name="tabBar">
 <view class="flex-h flex-hsb tab-bar" style="color: {{tabBar.color}}; background: {{tarBar.backgroundColor}}; {{tabBar.position==&#39;top&#39;? &#39;top: 0&#39; : &#39;bottom: 0&#39;}}; {{tabBar.borderStyle? (tabBar.position==&#39;top&#39;? &#39;border-bottom: solid 1px &#39;+tabBar.borderStyle + &#39;;&#39; : &#39;border-top: solid 1px &#39;+tabBar.borderStyle + &#39;;&#39;) : &#39;&#39;}}">
 <block wx:for="{{tabBar.list}}" wx:key="pagePath">
  <navigator url="{{item.pagePath}}" open-type="redirect" class="menu-item" style="{{item.active? &#39;color: &#39;+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : &#39;&#39;}}">
   <image src="{{item.selectedIconPath}}" wx:if="{{item.active}}"></image>
   <image src="{{item.iconPath}}" wx:if="{{!item.active}}"></image>
   <text>{{item.text}}</text>
  </navigator>
  </block>
 </view>
</template>

Als nächstes testen Sie zunächst die Konfiguration Objekt von index.js:

//配置tabBar
  tabBar: {
   "color": "#9E9E9E",
   "selectedColor": "#f00",
   "backgroundColor": "#fff",
   "borderStyle": "#ccc",
   "list": [
    {
     "pagePath": "/pages/index/index",
     "text": "主页",
     "iconPath": "../../img/tabBar_home.png",
     "selectedIconPath": "../../img/tabBar_home_cur.png",
     //"selectedColor": "#4EDF80",
     active: true
    },
    {
     "pagePath": "/pages/village/city/city",
     "text": "目的地",
     "iconPath": "../../img/tabBar_village.png",
     "selectedIconPath": "../../img/tabBar_village_cur.png",
     "selectedColor": "#4EDF80",
     active: false
    },
    {
     "pagePath": "/pages/mine/mine",
     "text": "我的",
     "iconPath": "../../img/tabBar_mine.png",
     "selectedIconPath": "../../img/tabBar_mine_cur.png",
     "selectedColor": "#4EDF80",
     active: false
    }
   ],
   "position": "bottom"
  }

index.wxml führt die Vorlage ein:

<import src="../../template/tabBar.wxml" />
<template is="tabBar" data="{{tabBar: tabBar}}" />

Als nächstes führt die Datei „mine.js“ das Konfigurationsobjekt ein:

//配置tabBar
  tabBar: {
   "color": "#9E9E9E",
   "selectedColor": "#f00",
   "backgroundColor": "#fff",
   "borderStyle": "#ccc",
   "list": [
    {
     "pagePath": "/pages/index/index",
     "text": "主页",
     "iconPath": "../../img/tabBar_home.png",
     "selectedIconPath": "../../img/tabBar_home_cur.png",
     //"selectedColor": "#4EDF80",
     active: false
    },
    {
     "pagePath": "/pages/village/city/city",
     "text": "目的地",
     "iconPath": "../../../img/tabBar_village.png",
     "selectedIconPath": "../../../img/tabBar_village_cur.png",
     "selectedColor": "#4EDF80",
     active: false
    },
    {
     "pagePath": "/pages/mine/mine",
     "text": "我的",
     "iconPath": "../../img/tabBar_mine.png",
     "selectedIconPath": "../../img/tabBar_mine_cur.png",
     "selectedColor": "#4EDF80",
     active: true
    }
   ],
   "position": "bottom"
  }

mine.wxml führt ein die Vorlage:

<import src="../../template/tabBar.wxml" />
<template is="tabBar" data="{{tabBar: tabBar}}" />

Die letzte Demonstration lautet wie folgt:

Option 2: Ich füge die Konfigurationsdaten in die Datei app.js ein und füge sie dann hinzu Um die Daten zur aktuellen Seiteninstanz zu übertragen, lautet die spezifische Methode wie folgt:

//app.js
var net = require('common/net');
var a_l, a_d = {}, a_cbSucc, a_cbSuccFail, a_cbFail, a_cbCom, a_h, a_m;
App({
 onLaunch: function () {
  var that = this;
 },
 //修改tabBar的active值
 editTabBar: function () {
  var _curPageArr = getCurrentPages();
  var _curPage = _curPageArr[_curPageArr.length - 1];<span style="font-family: Arial, Helvetica, sans-serif;">//相当于Page({})里面的this对象</span>
  var _pagePath=_curPage.__route__;
  if(_pagePath.indexOf(&#39;/&#39;) != 0){
   _pagePath=&#39;/&#39;+_pagePath;
  }
  var tabBar=this.globalData.tabBar;
  for(var i=0; i<tabBar.list.length; i++){
   tabBar.list[i].active=false;
   if(tabBar.list[i].pagePath==_pagePath){
    tabBar.list[i].active=true;//根据页面地址设置当前页面状态
   }
  }
  _curPage.setData({
   tabBar: tabBar
  });
 },
 globalData: {
  userInfo: null,
  //配置tabBar
  tabBar: {
   "color": "#9E9E9E",
   "selectedColor": "#f00",
   "backgroundColor": "#fff",
   "borderStyle": "#ccc",
   "list": [
    {
     "pagePath": "/pages/index/index",
     "text": "主页",
     "iconPath": "/pages/templateImg/tabBar_home.png",
     "selectedIconPath": "/pages/templateImg/tabBar_home_cur.png",
     "selectedColor": "#4EDF80",
     active: false
    },
    {
     "pagePath": "/pages/village/city/city",
     "text": "目的地",
     "iconPath": "/pages/templateImg/tabBar_village.png",
     "selectedIconPath": "/pages/templateImg/tabBar_village_cur.png",
     "selectedColor": "#4EDF80",
     active: false
    },
    {
     "pagePath": "/pages/mine/mine",
     "text": "我的",
     "iconPath": "/pages/templateImg/tabBar_mine.png",
     "selectedIconPath": "/pages/templateImg/tabBar_mine_cur.png",
     "selectedColor": "#4EDF80",
     active: false
    }
   ],
   "position": "bottom"
  }
 }
})

2 Verwendung der Seite „mine.js+city.js“:

var App=getApp();
Page({
 data:{
  detail: {},
 },
 onLoad:function(options){
  App.editTabBar();//添加tabBar数据
  var that=this;
 }
})

oben Ich habe es für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So konvertieren Sie das Zeitstempelformat in js

So erhalten Sie Dom-Elemente in Vue

So lesen Sie den vollständigen Text in Vue

So erstellen Sie ein Vue-Projekt auf Webpack

Das obige ist der detaillierte Inhalt vonInformationen zur Verwendung von tabBar-Vorlagen im WeChat-Miniprogramm (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!