首頁 > web前端 > js教程 > 主體

在微信小程式中有關tabBar範本用法(詳細教學)

亚连
發布: 2018-06-23 17:29:36
原創
1395 人瀏覽過

這篇文章主要介紹了微信小程式tabBar範本用法,結合具體實例形式分析了tabBar範本的定義、配置、引用等相關操作技巧,需要的朋友可以參考下

本文實例講述了微信小程式tabBar範本用法。分享給大家供大家參考,具體如下:

眾所周知,微信小程式的tabBar都是新開頁面的,而微信文檔上又顯示了最多只能開啟5層頁面。這樣就很容易導致出問題啦,假如我的tabBar有5個呢?下面是微信原話:

一個應用程式同時只能開啟5個頁面,當已經開啟了5個頁面之後,wx.navigateTo不能正常開啟新頁面。請避免多層級的互動方式,或使用wx.redirectTo

因此這幾天想著根據微信tabBar陣列來自訂範本供頁面呼叫。不過我在list裡面每個物件都增加了一個selectedColor和active屬性,方便對每個tabBar當前頁做樣式,如果不傳直接使用設定的selectedColor。因此這串資料只能設定在各個頁面下,不能設定在公用的app.js設定檔下,稍微有點程式碼冗餘,下次研究下怎麼直接設定在app.js完善下。

只要新建一個tarBar.wxml模板頁,然後引用模板的頁面傳入資料即可,程式碼如下:

<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>
登入後複製

接下來進行測試,首先是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引入模板:

<import src="../../template/tabBar.wxml" />
<template is="tabBar" data="{{tabBar: tabBar}}" />
登入後複製
登入後複製

接下來是mine.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: 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引入模板:

<import src="../../template/tabBar.wxml" />
<template is="tabBar" data="{{tabBar: tabBar}}" />
登入後複製
登入後複製

最後示範如下:

方案二,我把設定資料統一放在app.js文件,透過點擊跳轉頁面後在把資料加入到目前頁面實例上,具體做法如下:

1、app.js檔案配置:

//app.js
var net = require(&#39;common/net&#39;);
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、index.js mine.js city.js頁面使用:

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

上面是我整理給大家的,希望未來會對大家有幫助。

相關文章:

在js中如何實作轉換時間戳格式

在vue中如何取得dom元素

在vue中如何實作閱讀全文

在webpack上如何建立vue項目

以上是在微信小程式中有關tabBar範本用法(詳細教學)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板