微信小程序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 控制非法字符的输入代码
Dec 04 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
Mar 20 Javascript
JQuery Tips相关(1)----关于$.Ready()
Aug 14 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
jQuery实现文本展开收缩特效
Jun 03 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
Sep 26 Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
Feb 01 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 Javascript
在vue项目中 实现定义全局变量 全局函数操作
Oct 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(3) php 函数
2010/02/15 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
PHP实现的mongoDB数据库操作类完整实例
2018/04/10 PHP
PHP 使用位运算实现四则运算的代码
2021/03/09 PHP
原生Js实现简易烟花爆炸效果的方法
2015/03/20 Javascript
原生JS实现图片轮播效果
2016/12/26 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
JS对象是否拥有某属性如何判断
2017/02/03 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
vue 修改 data 数据问题并实时显示的方法
2018/08/27 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
2020/12/09 Javascript
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
dataframe设置两个条件取值的实例
2018/04/12 Python
对Python中gensim库word2vec的使用详解
2018/05/08 Python
python里运用私有属性和方法总结
2019/07/08 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
面向对象设计的原则是什么
2013/02/13 面试题
大一军训感言
2014/01/09 职场文书
忠诚教育心得体会
2014/09/03 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
2014年基层党支部工作总结
2014/12/04 职场文书
学校远程教育工作总结
2015/08/11 职场文书
2019年干货:自我鉴定
2019/03/25 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python
浅谈如何保证Mysql主从一致
2022/03/13 MySQL
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL