微信小程序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 相关文章推荐
javascript parseInt 函数分析(转)
Mar 21 Javascript
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
AngularJs expression详解及简单示例
Sep 01 Javascript
Javascript实现前端简单的路由实例
Sep 11 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
vue.js异步上传文件前后端实现代码
Aug 22 Javascript
AngularJS 中的数据源的循环输出
Oct 12 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
Oct 18 Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 Javascript
JavaScript数组类型Array相关的属性与方法详解
Sep 08 Javascript
vue循环中点击选中再点击取消(单选)的实现
Sep 10 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 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
php输出表格的实现代码(修正版)
2010/12/29 PHP
php递归函数怎么用才有效
2018/02/24 PHP
jquery多浏览器捕捉回车事件代码
2010/06/22 Javascript
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
JavaScript基础篇(6)之函数表达式闭包
2015/12/11 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
layui之select的option叠加问题的解决方法
2018/03/08 Javascript
Vue中的验证登录状态的实现方法
2019/03/09 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
vue 动态创建组件的两种方法
2020/12/31 Vue.js
vue 实现图片懒加载功能
2020/12/31 Vue.js
web.py中调用文件夹内模板的方法
2014/08/26 Python
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
Python正确重载运算符的方法示例详解
2017/08/27 Python
python读取txt文件中特定位置字符的方法
2018/12/24 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
Python初学者常见错误详解
2019/07/02 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
pymysql的简单封装代码实例
2020/01/08 Python
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
我爱祖国演讲稿
2014/09/02 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
党纪处分决定书
2015/06/24 职场文书
python自动化调用百度api解决验证码
2021/04/13 Python
Django使用channels + websocket打造在线聊天室
2021/05/20 Python
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL
阿里云日志过滤器配置日志服务
2022/04/09 Servers
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers