微信小程序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 相关文章推荐
鼠标经过tr时,改变tr当前背景颜色
Jan 13 Javascript
js 左右悬浮对联广告特效代码
Dec 12 Javascript
jQuery对指定元素中指定字符串进行替换的方法
Mar 17 Javascript
JScript中的条件注释详解
Apr 24 Javascript
js实现图片缓慢放大缩小效果
Aug 02 Javascript
如何实现星星评价(jquery.raty.js插件)
Dec 21 Javascript
jquery实现弹窗功能(窗口居中显示)
Feb 27 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 Javascript
vue 获取视频时长的实例代码
Aug 20 Javascript
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
js实现图片粘贴到网页
Dec 06 Javascript
利用js实现简易红绿灯
Oct 15 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使用cookie显示用户上次访问网站日期的方法
2015/01/26 PHP
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
javascript获取以及设置光标位置
2017/02/16 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
如何优雅地取消 JavaScript 异步任务
2020/03/22 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
基于canvasJS在PHP中制作动态图表
2020/05/30 Javascript
封装Vue Element的table表格组件的示例详解
2020/08/19 Javascript
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
Python中元组,列表,字典的区别
2017/05/21 Python
python 输出上个月的月末日期实例
2018/04/11 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
python实现学生通讯录管理系统
2021/02/25 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
Orvis官网:自1856年以来,优质服装、飞钓装备等
2018/12/17 全球购物
司机职责范本
2014/03/08 职场文书
公司授权委托书范文
2014/09/21 职场文书
中学生打架检讨书
2014/10/13 职场文书
城南旧事观后感
2015/06/11 职场文书
入党申请书怎么写?
2019/06/21 职场文书
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android