微信小程序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加入收藏夹代码(兼容ie/ff/op)
May 16 Javascript
jQuery表格排序组件-tablesorter使用示例
May 26 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
Dec 22 Javascript
jQuery实现精美的多级下拉菜单特效
Mar 14 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 Javascript
javascript滚轮控制模拟滚动条
Oct 19 Javascript
Vue.js组件使用开发实例教程
Nov 01 Javascript
简单介绍react redux的中间件的使用
Apr 06 Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 Javascript
Js视频播放器插件Video.js使用方法详解
Feb 04 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
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
js 加载并解析XML字符串的代码
2009/12/13 Javascript
JQuery中each()的使用方法说明
2010/08/19 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
javascript的解析执行顺序在各个浏览器中的不同
2014/03/17 Javascript
使用focus方法让光标默认停留在INPUT框
2014/07/29 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
Vue指令指令大全
2019/02/09 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
python实现写数字文件名的递增保存文件方法
2018/10/25 Python
Python 处理图片像素点的实例
2019/01/08 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
Python3.5 Pandas模块之Series用法实例分析
2019/04/23 Python
python内置模块collections知识点总结
2019/12/19 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
采购员岗位职责
2013/11/15 职场文书
大学生职业生涯规划范文
2014/01/08 职场文书
服装设计专业自荐信
2014/06/17 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
2015年学校减负工作总结
2015/05/19 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书