微信小程序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 相关文章推荐
js实现权限树的更新权限时的全选全消功能
Feb 17 Javascript
javascript OFFICE控件测试代码
Dec 08 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
Dec 10 Javascript
js获取及判断键盘按键的方法
Dec 01 Javascript
bootstrap-treeview自定义双击事件实现方法
Jan 09 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
JS实现访问DOM对象指定节点的方法示例
Apr 04 Javascript
vue 纯js监听滚动条到底部的实例讲解
Sep 03 Javascript
javascript的this关键字详解
May 20 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 Javascript
关于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新手上路(四)
2006/10/09 PHP
浅谈php自定义错误日志
2015/02/13 PHP
php写入数据到CSV文件的方法
2015/03/14 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
php实现微信公众号创建自定义菜单功能的实例代码
2019/06/11 PHP
PHP二维数组分页2种实现方法解析
2020/07/09 PHP
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
基于jquery循环map功能的代码
2011/02/26 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
jquery结婚电子请柬特效源码分享
2015/08/21 Javascript
js改变css样式的三种方法推荐
2016/06/28 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
Python开发常用的一些开源Package分享
2015/02/14 Python
python3+PyQt5自定义视图详解
2018/04/24 Python
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
在Python中实现替换字符串中的子串的示例
2018/10/31 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
Python的log日志功能及设置方法
2019/07/11 Python
详解python中docx库的安装过程
2019/11/08 Python
Python命令行click参数用法解析
2019/12/19 Python
使用TensorFlow-Slim进行图像分类的实现
2019/12/31 Python
python3实现往mysql中插入datetime类型的数据
2020/03/02 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
PyCharm Community安装与配置的详细教程
2020/11/24 Python
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
测试驱动开发的主要步骤是什么
2014/12/10 面试题
土木工程专业大学毕业生求职信
2013/10/13 职场文书
说明书范文
2014/05/07 职场文书
健康教育评估方案
2014/05/25 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书
新郎结婚感言
2015/07/31 职场文书
Python Pandas pandas.read_sql_query函数实例用法分析
2021/06/21 Python