微信小程序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 相关文章推荐
jQuery 中关于CSS操作部分使用说明
Jun 10 Javascript
asp 取文本框名称代码
Dec 02 Javascript
javascript 防止刷新,后退,关闭
Aug 07 Javascript
javascript写的日历类(基于pj)
Dec 28 Javascript
js分页代码分享
Apr 28 Javascript
jquery实现submit提交表单
Feb 03 Javascript
JS实现文字掉落效果的方法
May 06 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
javascript事件绑定学习要点
Mar 09 Javascript
详解Angular2 关于*ngFor 嵌套循环
May 22 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
swiper实现导航滚动效果
Dec 13 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 和 HTML
2006/10/09 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
学习JavaScript设计模式之模板方法模式
2016/01/20 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
2020/02/12 Javascript
Vue组件模板及组件互相引用代码实例
2020/03/11 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
[46:21]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
[00:37]食人魔魔法师轮盘吉兆顺应全新至宝将拥有额外款式
2019/12/19 DOTA
Python正则表达式介绍
2012/08/06 Python
python基础知识小结之集合
2015/11/25 Python
python通过Windows下远程控制Linux系统
2018/06/20 Python
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
2019/06/12 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
通过 Django Pagination 实现简单分页功能
2019/11/11 Python
Python Celery多队列配置代码实例
2019/11/22 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
python GUI库图形界面开发之PyQt5简单绘图板实例与代码分析
2020/03/08 Python
Python 通过监听端口实现唯一脚本运行方式
2020/05/05 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
安装pyinstaller遇到的各种问题(小结)
2020/11/20 Python
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
EJB的角色和三个对象
2015/12/31 面试题
成教自我鉴定
2013/10/27 职场文书
机关出纳岗位职责
2014/04/03 职场文书
小学生成绩单评语
2014/12/31 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
2019年行政人事个人工作总结范本!
2019/07/19 职场文书