微信小程序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 相关文章推荐
intro.js 页面引导简单用法 分享
Aug 06 Javascript
jQuery遍历Form示例代码
Sep 03 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
Feb 12 Javascript
通过jquery 获取URL参数并进行转码
Aug 18 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
Oct 07 Javascript
jquery读写cookie操作实例分析
Dec 24 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
Javascript的表单验证长度
Mar 16 Javascript
jQuery插件uploadify实现ajax效果的图片上传
Jun 18 Javascript
Vue+webpack项目基础配置教程
Feb 12 Javascript
小程序实现选择题选择效果
Nov 04 Javascript
vue用BMap百度地图实现即时搜索功能
Sep 26 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
php win下Socket方式发邮件类
2009/08/21 PHP
PHP中改变图片的尺寸大小的代码
2011/07/17 PHP
10条PHP高级技巧[修正版]
2011/08/02 PHP
php将gd生成的图片缓存到memcache的小例子
2013/06/05 PHP
php中动态修改ini配置
2014/10/14 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
实例讲解php数据访问
2016/05/09 PHP
PHP页面间传递值和保持值的方法
2016/08/24 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
javascript 动态添加表格行
2006/06/22 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
禁用Enter键表单自动提交实现代码
2014/05/22 Javascript
JavaScript实现的一个计算数字步数的算法分享
2014/12/06 Javascript
javascript实现确定和取消提示框效果
2015/07/10 Javascript
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
2016/08/16 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
简单的网页广告特效实例
2017/08/19 Javascript
浅谈vue,angular,react数据双向绑定原理分析
2017/11/28 Javascript
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
详解Python编程中基本的数学计算使用
2016/02/04 Python
Ubuntu 下 vim 搭建python 环境 配置
2017/06/12 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
keras slice layer 层实现方式
2020/06/11 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
《金子》教学反思
2014/04/13 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
水电站项目建议书
2014/05/12 职场文书
银行工作心得体会范文
2016/01/23 职场文书
PyCharm 安装与使用配置教程(windows,mac通用)
2021/05/12 Python