微信小程序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学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
JavaScript 和 Java 的区别浅析
Jul 31 Javascript
jQuery实现联动下拉列表查询框
Jan 04 Javascript
微信小程序实现点击返回顶层的方法
Jul 12 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
Mar 06 Javascript
JS原生带缩略图的图片切换效果
Oct 10 Javascript
angular6的响应式表单的实现
Oct 10 Javascript
微信小程序自定义tabBar组件开发详解
Sep 24 Javascript
VUE组件中的 Drawer 抽屉实现代码
Aug 06 Javascript
vue中监听返回键问题
Aug 28 Javascript
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 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 Smarty date_format [格式化时间日期]
2010/03/15 PHP
PHP--用万网的接口实现域名查询功能
2012/12/13 PHP
PHP中array_merge和array相加的区别分析
2013/06/17 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
JavaScript 特殊字符
2007/04/05 Javascript
js创建对象的区别示例介绍
2014/07/24 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
微信小程序 自己制作小组件实例详解
2016/12/22 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
浅谈Python爬取网页的编码处理
2016/11/04 Python
Python 异常处理的实例详解
2017/09/11 Python
Python代码缩进和测试模块示例详解
2018/05/07 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
Python笔试面试题小结
2019/09/07 Python
python中调试或排错的五种方法示例
2019/09/12 Python
Django中使用Json返回数据的实现方法
2020/06/03 Python
浅谈TensorFlow中读取图像数据的三种方式
2020/06/30 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
python,Java,JavaScript实现indexOf
2020/09/09 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
VIVOBAREFOOT赤脚鞋:让您的脚做自然的事情
2017/06/01 全球购物
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
外语专业毕业生个人的自荐信
2013/11/19 职场文书
二年级学生评语大全
2014/04/23 职场文书
《孙权劝学》教学反思
2014/04/23 职场文书
诚信的演讲稿范文
2014/05/12 职场文书
小学节能减排倡议书
2014/05/15 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
2019学校运动会开幕词
2019/05/13 职场文书
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS