微信小程序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 相关文章推荐
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
js控制淡入淡出示例代码
Nov 12 Javascript
Javascript浅谈之this
Dec 17 Javascript
js实现文字在按钮上滚动的方法
Aug 20 Javascript
D3.js中强制异步文件读取同步的几种方法
Feb 06 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
Jun 04 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
Sep 18 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 Javascript
layui table单元格事件修改值的方法
Sep 24 Javascript
Vuex的实战使用详解
Oct 31 Javascript
jquery插件实现悬浮的菜单
Apr 24 jQuery
WebRTC记录音视频流(web技术分享)
Feb 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
php中使用session_set_save_handler()函数把session保存到MySQL数据库实例
2014/11/06 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
Yii基于CActiveForm的Ajax数据验证用法示例
2016/07/14 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
2012/08/14 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
2015/05/28 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
JS将网址url转化为JSON格式的方法
2018/07/02 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
详解Python中如何写控制台进度条的整理
2018/03/07 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
Python用K-means聚类算法进行客户分群的实现
2020/08/23 Python
Django中和时区相关的安全问题详解
2020/10/12 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
长曲棍球装备:Lacrosse Monkey
2020/12/02 全球购物
安全生产知识竞赛活动总结
2014/07/07 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
解决numpy和torch数据类型转化的问题
2021/05/23 Python
你真的会用Mysql的explain吗
2022/03/31 MySQL
MySQL 计算连续登录天数
2022/05/11 MySQL