微信小程序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 相关文章推荐
脚本安需导入(装载)的三种模式的对比
Jun 24 Javascript
JS 进度条效果实现代码整理
May 21 Javascript
jquery实现图片滚动效果的简单实例
Nov 23 Javascript
js实现下拉列表选中某个值的方法(3种方法)
Dec 17 Javascript
Node.js+Express配置入门教程
May 19 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
Jul 06 Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
node.js操作MongoDB的实例详解
Oct 11 Javascript
微信小程序页面上下滚动效果
Nov 18 Javascript
JS简易计算器实例讲解
Jun 30 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 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
新52大事件
2020/03/03 欧美动漫
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
CI框架源码阅读,系统常量文件constants.php的配置
2013/02/28 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
php从完整文件路径中分离文件目录和文件名的方法
2015/03/13 PHP
Symfony核心类概述
2016/03/17 PHP
php实现的简单数据库操作Model类
2016/11/16 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
Prototype使用指南之string.js
2007/01/10 Javascript
js实现的复制兼容chrome和IE
2014/04/03 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
详解Nodejs之静态资源处理
2017/06/05 NodeJs
使用axios实现上传图片进度条功能
2017/12/21 Javascript
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
Python中音频处理库pydub的使用教程
2017/06/07 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
python操作列表的函数使用代码详解
2017/12/28 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
python中pika模块问题的深入探究
2018/10/13 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
python实现批处理文件
2020/07/28 Python
python 实现单例模式的5种方法
2020/09/23 Python
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
20年同学聚会感言
2014/02/03 职场文书
同事打架检讨书
2014/02/04 职场文书
学校运动会广播稿100条
2014/09/14 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书