支付宝小程序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 相关文章推荐
js 实现浏览历史记录示例
Apr 20 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 Javascript
js右下角弹出提示框示例代码
Jan 12 Javascript
jQuery设置Cookie及删除Cookie实例分析
Apr 15 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
简单实现AngularJS轮播图效果
Apr 10 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
js+css实现打字效果
Jun 24 Javascript
JS实现图片拖拽交换效果
Nov 30 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 Javascript
vue中created和mounted的区别浅析
Aug 13 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 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
PHP版自动生成文章摘要
2008/07/23 PHP
基于php冒泡排序算法的深入理解
2013/06/09 PHP
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
jquery select(列表)的操作(取值/赋值)
2011/03/16 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
js如何实现设计模式中的模板方法
2013/07/23 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
jQuery实现字体颜色渐变效果的方法
2017/03/29 jQuery
JavaScript中Object基础内部方法图
2018/02/05 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
深入理解Vue keep-alive及实践总结
2019/08/21 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
用Python配平化学方程式的方法
2019/07/20 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
html5的新增的标签和废除的标签简要概述
2013/02/20 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
家庭户外服装:Hawkshead
2017/11/02 全球购物
中国领先的汽车保养服务平台:途虎养车
2019/10/18 全球购物
CHRONEXT英国:您的首选奢华腕表目的地
2020/03/30 全球购物
自动化专业毕业生自荐信
2013/11/01 职场文书
企业给企业的表扬信
2014/01/13 职场文书
数控技校生自我鉴定
2014/03/02 职场文书
运动会口号8字
2014/06/07 职场文书
节约粮食标语
2014/06/18 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
5分钟教你docker安装启动redis全教程(全新方式)
2021/05/29 Redis