支付宝小程序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 函数使用说明
Apr 07 Javascript
Javascript中的变量使用说明
May 18 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
Jan 03 Javascript
jQuery实现自动调整字体大小的方法
Jun 15 Javascript
详解JavaScript中的属性和特性
Dec 08 Javascript
js 获取图像缩放后的实际宽高,位置等信息
Mar 07 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
Jan 26 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
Javascript实现动态时钟效果
Nov 17 Javascript
详解微信UnionID作用
May 15 Javascript
Javascript柯里化实现原理及作用解析
Oct 22 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
Email+URL的判断和自动转换函数
2006/10/09 PHP
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
php轻松实现文件上传功能
2016/03/03 PHP
PHP 返回13位时间戳的实现代码
2016/05/13 PHP
php+redis实现多台服务器内网存储session并读取示例
2017/01/12 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
自己动手开发jQuery插件教程
2011/08/25 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
2017/08/22 Javascript
Vue引入sass并配置全局变量的方法
2018/06/27 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
浅谈vuex为什么不建议在action中修改state
2020/02/02 Javascript
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
详解Python迭代和迭代器
2016/03/28 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
替换python字典中的key值方法
2018/07/06 Python
Python中一般处理中文的几种方法
2019/03/06 Python
Python自动化运维之Ansible定义主机与组规则操作详解
2019/06/13 Python
python config文件的读写操作示例
2019/09/27 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
python安装mysql的依赖包mysql-python操作
2021/01/01 Python
css3 矩阵的使用详解
2018/03/20 HTML / CSS
计算机网络专业个人的自我评价
2013/10/17 职场文书
总经理办公室主任岗位职责
2013/11/12 职场文书
幼儿园开学寄语
2014/04/03 职场文书
班级心理活动总结
2014/07/04 职场文书
创业项目(超低成本创业项目)
2019/08/16 职场文书
JPA如何使用entityManager执行SQL并指定返回类型
2021/06/15 Java/Android
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android