微信小程序tabBar模板用法实例分析【附demo源码下载】


Posted in Javascript onNovember 28, 2017

本文实例讲述了微信小程序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}}" />

最后演示如下:

微信小程序tabBar模板用法实例分析【附demo源码下载】

方案二,我把配置数据统一放在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;
 }
})

最终演示和上图一致!

附:完整demo代码点击此处本站下载

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
prototype 学习笔记整理
Jul 17 Javascript
autoIMG 基于jquery的图片自适应插件代码
Mar 12 Javascript
Jquery 数据选择插件Pickerbox使用介绍
Aug 24 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
jquery常用的12个小功能
Jul 22 Javascript
详解js中的apply与call的用法
Jul 30 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 Javascript
JS+H5 Canvas实现时钟效果
Jul 20 Javascript
详解ES6 Symbol 的用途
Oct 14 Javascript
layui表格内容溢出的解决方法
Sep 06 Javascript
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
关于angularJs清除浏览器缓存的方法
Nov 28 #Javascript
AngularJs 禁止模板缓存的方法
Nov 28 #Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
Nov 28 #Javascript
vue2.0与bootstrap3实现列表分页效果
Nov 28 #Javascript
Vue.JS项目中5个经典Vuex插件
Nov 28 #Javascript
Vue实现web分页组件详解
Nov 28 #Javascript
基于vue2实现左滑删除功能
Nov 28 #Javascript
You might like
php输出xml属性的方法
2015/03/19 PHP
PHP常用函数总结(180多个)
2016/12/25 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
ExtJS4中使用mixins实现多继承示例
2013/12/03 Javascript
JavaScript学习笔记之JS函数
2015/01/22 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
简单实现异步编程promise模式
2015/07/31 Javascript
js通过classname来获取元素的方法
2016/11/24 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
JS数组reduce()方法原理及使用技巧解析
2020/07/14 Javascript
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python计算方程式根的方法
2015/05/07 Python
Python爬虫爬验证码实现功能详解
2016/04/14 Python
python 网络编程详解及简单实例
2017/04/25 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
pyqt5自定义信号实例解析
2018/01/31 Python
在PyCharm环境中使用Jupyter Notebook的两种方法总结
2018/05/24 Python
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
python plotly绘制直方图实例详解
2019/07/22 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
python如何爬取网页中的文字
2020/07/28 Python
python 基于selenium实现鼠标拖拽功能
2020/12/24 Python
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
什么是索引指示器
2012/08/20 面试题
分公司经理岗位职责
2013/11/11 职场文书
单位承诺书格式
2014/05/21 职场文书
党员自我剖析材料
2014/08/31 职场文书
老舍《猫》教学反思
2016/02/17 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书