這篇文章主要介紹了微信小程式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=='top'? 'top: 0' : 'bottom: 0'}}; {{tabBar.borderStyle? (tabBar.position=='top'? 'border-bottom: solid 1px '+tabBar.borderStyle + ';' : 'border-top: solid 1px '+tabBar.borderStyle + ';') : ''}}"> <block wx:for="{{tabBar.list}}" wx:key="pagePath"> <navigator url="{{item.pagePath}}" open-type="redirect" class="menu-item" style="{{item.active? 'color: '+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : ''}}"> <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('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('/') != 0){ _pagePath='/'+_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; } })
上面是我整理給大家的,希望未來會對大家有幫助。
相關文章:
以上是在微信小程式中有關tabBar範本用法(詳細教學)的詳細內容。更多資訊請關注PHP中文網其他相關文章!