支付宝小程序tabbar底部导航


Posted in Javascript onNovember 06, 2018

支付宝小程序重写tabbar底部导航,供大家参考,具体内容如下

1.app.js中代码如下

editTabBar: function () {
  var e = this.globalData.tabbar, a = getCurrentPages(), t = a[a.length - 1], s = t.route;
  console.log(t)
  console.log(s)
  0 != s.indexOf("/") && (s = "/" + s);
  for (var n in e.items) e.items[n].selected = !1, e.items[n].pagePath == s && (e.items[n].selected = !0);
  t.setData({
   tabbar: e
  });
 },
 globalData: {
  userInfo: null,
  //配置tabbar
  tabbar: {
   textColor: "#333",
   selectedColor: "#d0501f",
   backgroundColor: "#ffffff",
   borderStyle: "#d5d5d5",
   items: [{
    pagePath: "/pages/seller/gzt/gzt",
    name: "工作台",
    icon: "/pages/icon/index.png",
    activeIcon: "/pages/icon/index_1.png",
    selected: !0
    },{
    pagePath: "/pages/seller/shezhi/shezhi",
    name: "设置",
    icon: "/pages/images/sz@3x.png",
    activeIcon: "/pages/images/xzsz.png",
    selected: !1
   }],
   position: "bottom"
  }
 }

2.template.axml代码如下

<template name="tabbar">
  <view class="tabbar_box" style="background-color:{{tabbar.backgroundColor}}; border-top-color:{{tabbar.borderStyle}}; {{tabbar.position=='top'?'top:0':'bottom:0'}}">
    <navigator class="tabbar_nav" openType="redirect" style="width:{{1/tabbar.items.length*100}}%; color:{{item.selected?tabbar.selectedColor:tabbar.textColor}}" url="{{item.pagePath}}" a:for="{{tabbar.items}}" a:key="index">
      <image class="tabbar_icon" src="{{item.selected?item.activeIcon:item.icon}}"></image>
      <text>{{item.name}}</text>
    </navigator>
  </view>
</template>

3.template.acssl代码如下

.tabbar_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100rpx;
  border-top: 0.5rpx solid #d5d5d5;
}

.tabbar_nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 25rpx;
  height: 100%;
}

.tabbar_icon {
  width: 40rpx;
  height: 40rpx;
}

4.在需要引入的页面(.axml)中

- <import src="../template.axml"></import>
<template is="tabbar" data="{{tabbar:tabbar}}"></template>

5.在需要引入的样式(acss)中

@import "../template.acss";

6.在需要引入的js中

var app=getApp(); //放在顶部
 tabbar:{},     //放在data中
 app.editTabBar(); //放在onLoad中

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中yield实用简洁实现方式
Jun 12 Javascript
js中Math之random,round,ceil,floor的用法总结
Dec 26 Javascript
js对象转json数组的简单实现案例
Feb 28 Javascript
javascript设计模式之中介者模式Mediator
Dec 30 Javascript
Jquery使用css方法改变样式实例
May 18 Javascript
JavaScript对象数组的排序处理方法
Oct 21 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
简述vue路由打开一个新的窗口的方法
Nov 29 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
JS异步堆栈追踪之为什么await胜过Promise
Apr 28 Javascript
React中的Context应用场景分析
Jun 11 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
Nov 05 #Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 #Javascript
微信小程序实现底部导航
Nov 05 #Javascript
对 Vue-Router 进行单元测试的方法
Nov 05 #Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 #Javascript
微信小程序http连接访问解决方案的示例
Nov 05 #Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
Nov 05 #Javascript
You might like
40年前的这部特摄片恐龙特级克塞号80后的共同回忆
2020/03/08 日漫
php include,include_once,require,require_once
2008/09/05 PHP
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
《PHP编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
javascript 变量作用域 代码分析
2009/06/26 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python常用内置函数总结
2015/02/08 Python
win与linux系统中python requests 安装
2016/12/04 Python
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
利用Python找出序列中出现最多的元素示例代码
2017/12/08 Python
python取代netcat过程分析
2018/02/10 Python
详解python单元测试框架unittest
2018/07/02 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
解决Python安装cryptography报错问题
2020/09/03 Python
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
工作岗位说明书模板
2014/05/09 职场文书
学校安全生产承诺书
2014/05/23 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
团党委领导干部党的群众路线教育实践活动个人对照检查材料思想汇
2014/10/05 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
礼仪培训心得体会
2016/01/22 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android