支付宝小程序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 相关文章推荐
基于jquery用于查询操作的实现代码
May 10 Javascript
jquery datepicker参数介绍和示例
Apr 15 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
Apr 30 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 Javascript
vue-router 学习快速入门
Mar 01 Javascript
Vue.js 2.0中select级联下拉框实例
Mar 06 Javascript
jQuery动态产生select option下拉列表
Mar 15 Javascript
layui 表单标签的校验方法
Sep 04 Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 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
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
PHP实现获取某个月份周次信息的方法
2015/08/11 PHP
CodeIgniter 完美解决URL含有中文字符串
2016/05/13 PHP
php自动载入类用法实例分析
2016/06/24 PHP
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
prototype Element学习笔记(篇一)
2008/10/26 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
[02:27]2018DOTA2亚洲邀请赛趣味视频之钓鱼大赛 谁是垂钓冠军?
2018/04/05 DOTA
python处理cookie详解
2014/02/07 Python
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
Python中 map()函数的用法详解
2018/07/10 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
python画蝴蝶曲线图的实例
2019/11/21 Python
Python爬虫实例——scrapy框架爬取拉勾网招聘信息
2020/07/14 Python
Python eval函数介绍及用法
2020/11/09 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
匈牙利最大的健身制造商和销售商:inSPORTline
2018/10/30 全球购物
size?爱尔兰官方网站:英国伦敦的球鞋精品店
2019/03/31 全球购物
JAVA程序员面试题
2012/10/03 面试题
调查研究项目计划书
2014/04/29 职场文书
投资意向书
2014/07/30 职场文书
应届毕业生自荐信
2015/03/04 职场文书
外出培训学习心得体会
2016/01/18 职场文书
JavaScript如何优化逻辑判断代码详解
2021/06/08 Javascript
GPU服务器的多用户配置方法
2022/07/07 Servers