支付宝小程序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利用Array.splice实现Array的insert/remove
Jan 13 Javascript
jQuery插件pagewalkthrough实现引导页效果
Jul 05 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 Javascript
JavaScript错误处理和堆栈追踪详解
Apr 18 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
Jul 07 Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 Javascript
浅谈vuepress 踩坑记
Apr 18 Javascript
微信小程序实现留言板功能
Nov 02 Javascript
微信小程序实现的五星评价功能示例
Apr 25 Javascript
vue 移动端注入骨架屏的配置方法
Jun 25 Javascript
vuex实现数据状态持久化
Nov 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
PHP中,文件上传
2006/12/06 PHP
超级好用的一个php上传图片类(随机名,缩略图,加水印)
2010/06/30 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)
2020/07/24 PHP
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
2016/04/21 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
jQuery时间日期三级联动(推荐)
2016/11/27 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
微信小程序实现图片压缩功能
2018/01/26 Javascript
vue.js删除列表中的一行
2018/06/30 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
Python操作列表的常用方法分享
2014/02/13 Python
Python中的startswith和endswith函数使用实例
2014/08/25 Python
python中lambda与def用法对比实例分析
2015/04/30 Python
深入解读Python解析XML的几种方式
2016/02/16 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
python爬虫实现中英翻译词典
2019/06/25 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
证婚人经典证婚词
2014/01/09 职场文书
护士辞职信怎么写
2015/02/27 职场文书
2019求职信大礼包
2019/05/15 职场文书
导游词之秦皇岛燕塞湖
2020/01/03 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL
MySQL8.0的WITH查询详情
2021/08/30 MySQL