支付宝小程序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的web页面日期格式化插件
Nov 15 Javascript
jquery动态增加text元素以及删除文本内容实例代码
Jul 01 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
Aug 24 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
js创建对象的方法汇总
Jan 07 Javascript
javascript的BOM
May 03 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
以BootStrap Tab为例写一个前端组件
Jul 25 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
node之本地服务器图片上传的方法示例
Mar 26 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
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
php守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
浅谈php命令行用法
2015/02/04 PHP
composer.lock文件的作用
2016/02/03 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
PHP实现的数组和XML文件相互转换功能示例
2018/03/15 PHP
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
javascript setinterval 的正确语法如何书写
2014/06/17 Javascript
直接在JS里创建JSON数据然后遍历使用
2014/07/25 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
浅析创建javascript对象的方法
2016/05/13 Javascript
js发送短信倒计时的简单实现方法
2016/09/08 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
JavaScript数组去重的多种方法(四种)
2017/09/19 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
Python 判断是否为质数或素数的实例
2017/10/30 Python
windows下python和pip安装教程
2018/05/25 Python
django admin组件使用方法详解
2019/07/19 Python
python openCV获取人脸部分并存储功能
2019/08/28 Python
印度网上购物首选目的地:Flipkart
2016/08/01 全球购物
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
外贸公司实习自我鉴定
2013/09/24 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
出生公证书
2015/01/23 职场文书
大班下学期个人总结
2015/02/13 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript