微信小程序tabbar底部导航


Posted in Javascript onNovember 05, 2018

微信小程序重写tabbar底部导航,供大家参考,具体内容如下

1.app.js代码如下:

editTabBar: function() {
    var e = this.globalData.tabbar, a = getCurrentPages(), t = a[a.length - 1], s = t.__route__;
    0 != s.indexOf("/") && (s = "/" + s);
    for (var n in e.list) e.list[n].selected = !1, e.list[n].pagePath == s && (e.list[n].selected = !0);
    t.setData({
      tabbar: e
    });
  },
  tabBar: {
    color: "#123",
    selectedColor: "#1ba9ba",
    borderStyle: "#1ba9ba",
    backgroundColor: "#fff",
    list: [ {
      pagePath: "/we7/pages/index/index",
      iconPath: "/we7/resource/icon/home.png",
      selectedIconPath: "/we7/resource/icon/homeselect.png",
      text: "首页"
    }, {
      pagePath: "/we7/pages/user/index/index",
      iconPath: "/we7/resource/icon/user.png",
      selectedIconPath: "/we7/resource/icon/userselect.png",
      text: "我的"
    } ]
  },
  globalData: {
    userInfo: null,
    tabbar: {
      color: "#333",
      selectedColor: "#d0501f",
      backgroundColor: "#ffffff",
      borderStyle: "#d5d5d5",
      list: [ {
        pagePath: "/pages/seller/gzt",
        text: "工作台",
        iconPath: "/pages/images/gzt@3x.png",
        selectedIconPath: "/pages/images/gztxz@3x.png",
        selected: !0
      }, {
        pagePath: "/pages/seller/cp/cplb",
        text: "商品",
        iconPath: "/pages/images/dbdc.png",
        selectedIconPath: "/pages/images/dbdcxz.png",
        selected: !1
      }, 
      position: "bottom"
    }
  },

template.wxml

<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.list.length*100}}%; color:{{item.selected?tabbar.selectedColor:tabbar.color}}" url="{{item.pagePath}}" wx:for="{{tabbar.list}}" wx:key="index">
      <image class="tabbar_icon" src="{{item.selected?item.selectedIconPath:item.iconPath}}"></image>
      <text>{{item.text}}</text>
    </navigator>
  </view>
</template>

3.template.wxss

.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;
}

在需要用的页面(wxml)添加如下代码

<import src="template.wxml"></import>
<template is="tabbar" data="{{tabbar:tabbar}}"></template>

在需要的样式(wxss)添加如下代码

@import "template.wxss";

在需要的js页面添加如下代码:

var dsq, app = getApp();添加在顶部
tabbar: {},在data中添加
app.editTabBar();在onLoad中添加

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
Jul 08 Javascript
按钮接受回车事件的三种实现方法
Jun 06 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
使用JavaScript的AngularJS库编写hello world的方法
Jun 23 Javascript
javascript实现控制的多级下拉菜单
Jul 05 Javascript
基于JavaScript实现TAB标签效果
Jan 12 Javascript
微信小程序 开发经验整理
Feb 15 Javascript
Vue Element使用icon图标教程详解(第三方)
Feb 07 Javascript
vue实现简单loading进度条
Jun 06 Javascript
js module大战
Apr 19 Javascript
vue 实现tab切换保持数据状态
Jul 21 Javascript
vue实现验证用户名是否可用
Jan 20 Vue.js
详解webpack+ES6+Sass搭建多页面应用
Nov 05 #Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 #Javascript
小程序实现选择题选择效果
Nov 04 #Javascript
小程序实现单选多选功能
Nov 04 #Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 #Javascript
微信小程序实现登录注册tab切换效果
Dec 29 #Javascript
原生js实现淘宝放大镜效果
Oct 28 #Javascript
You might like
第1次亲密接触PHP5(2)
2006/10/09 PHP
php中计算未知长度的字符串哪个字符出现的次数最多的代码
2012/08/14 PHP
深入解析php中的foreach函数
2013/08/31 PHP
PHP自带ZIP压缩、解压缩类ZipArchiv使用指南
2015/03/03 PHP
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
js 鼠标拖动对象 可让任何div实现拖动效果
2009/11/09 Javascript
JavaScript 编写匿名函数的几种方法
2010/02/21 Javascript
JS 文件大小判断的实现代码
2010/04/07 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
2013/11/28 Javascript
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
用原生JS获取CLASS对象(很简单实用)
2014/10/15 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
用JS中split方法实现彩色文字背景效果实例
2016/08/24 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
2017/03/30 Javascript
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
简单说明Python中的装饰器的用法
2015/04/24 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
如何在python中判断变量的类型
2020/07/29 Python
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
个人简历自我评价八例
2013/10/31 职场文书
经济学博士求职自荐信范文
2013/11/23 职场文书
五一劳动节活动记录
2014/03/23 职场文书
最美家庭活动方案
2014/08/31 职场文书
在前女友婚礼上,用Python破解了现场的WIFI还把名称改成了
2021/05/28 Python