微信小程序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过滤HTML标签以及空格的思路及代码
May 24 Javascript
Javascript selection的兼容性写法介绍
Dec 20 Javascript
jquery用data方法获取某个元素上的事件
Jun 23 Javascript
jquery操作HTML5 的data-*的用法实例分享
Aug 17 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
Jun 18 Javascript
js实时获取窗口大小变化的实例代码
Nov 18 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
May 26 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
Sep 20 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 Javascript
详解微信小程序获取当前时间及日期的方法
Apr 28 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
Oct 31 Javascript
详解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
WordPress中is_singular()函数简介
2015/02/05 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
PHP重载基础知识回顾
2020/09/10 PHP
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
Javascript中数组方法汇总(推荐)
2015/04/01 Javascript
js结合正则实现国内手机号段校验
2015/06/19 Javascript
jquery选择器简述
2015/08/31 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
Vue.js用法详解
2017/11/13 Javascript
详解使用React进行组件库开发
2018/02/06 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
2018/02/28 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
python中日志logging模块的性能及多进程详解
2017/07/18 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
使用Python实现租车计费系统的两种方法
2018/09/29 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
python 使用xlsxwriter循环向excel中插入数据和图片的操作
2021/01/01 Python
css3个性化字体_动力节点Java学院整理
2017/07/12 HTML / CSS
教师实习自我鉴定
2013/12/11 职场文书
《记承天寺夜游》教学反思
2014/02/16 职场文书
个人求职自荐信范文
2014/06/20 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
2014年小学工作总结
2014/11/26 职场文书
SQL Server数据库基本概念、组成、常用对象与约束
2022/03/20 SQL Server