À propos de l'utilisation du modèle tabBar dans le mini-programme WeChat (tutoriel détaillé)

Cet article présente principalement l'utilisation du modèle tabBar du mini programme WeChat et analyse la définition, la configuration, la référence et d'autres compétences opérationnelles connexes du modèle tabBar sous la forme d'exemples spécifiques. Les amis dans le besoin peuvent se référer à ce qui suit <.>

Les exemples de cet article sont décrits. Apprenez à utiliser le modèle tabBar du mini programme WeChat. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Comme nous le savons tous, la barre d'onglets de l'applet WeChat ouvre une nouvelle page et le document WeChat montre que seules 5 pages maximum peuvent être ouvertes. Cela peut facilement entraîner des problèmes. Que se passe-t-il si j'ai 5 barres de tabulation ? Voici les mots originaux de WeChat :

Une application ne peut ouvrir que 5 pages en même temps. Après l'ouverture de 5 pages,

les nouvelles pages ne peuvent pas être ouvertes normalement. Veuillez éviter les interactions à plusieurs niveaux ou utiliser wx.navigateTowx.redirectTo

Par conséquent, ces jours-ci, j'ai pensé à personnaliser le modèle basé sur le tableau tabBar WeChat pour les appels de page. Cependant, j'ai ajouté un selectedColor et des attributs actifs à chaque objet de la liste pour faciliter le style de la page actuelle de chaque tabBar. S'il n'est pas transmis, l'ensemble selectedColor sera utilisé directement. Par conséquent, cette chaîne de données ne peut être définie que sous chaque page et ne peut pas être définie sous le fichier de configuration public app.js. Elle est un peu redondante dans le code. La prochaine fois, j'étudierai comment la configurer directement dans l'application. js.

Créez simplement une nouvelle page de modèle tarBar.wxml, puis transmettez les données de la page qui fait référence au modèle. Le code est le suivant :

<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>

L'étape suivante consiste à. tester, d'abord la configuration de l'objet 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"
  }

modèle d'import index.wxml :

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

Vient ensuite le fichier mine.js pour introduire l'objet de configuration :

//配置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"
  }

Modèle d'import mine.wxml :

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

La démonstration finale est la suivante :

Option 2, je mets le données de configuration dans le fichier app.js, puis cliquez pour accéder à la page. Enfin, ajoutez les données à l'instance de page actuelle. La méthode spécifique est la suivante :

1. Configuration du fichier app.js :

2. Utilisation de la page index.js+mine.js+city. js :

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

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde. l'avenir.

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

Articles associés :

Comment convertir le format d'horodatage en js

Comment obtenir des éléments dom dans vue

Comment lire le texte intégral dans vue

Comment créer un projet vue sur webpack

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!