微信小程序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 相关文章推荐
利用jq让你的div居中的好方法分享
Nov 21 Javascript
D3.js实现柱状图的方法详解
Sep 21 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
javascript实现延时显示提示框效果
Jun 01 Javascript
详解Vue.js项目API、Router配置拆分实践
Mar 16 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
jquery无缝图片轮播组件封装
Nov 25 jQuery
基于Node的Axure文件在线预览的实现代码
Aug 28 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 Javascript
vue项目中使用bpmn为节点添加颜色的方法
Apr 30 Javascript
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
详解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
屏蔽浏览器缓存另类方法
2006/10/09 PHP
php中对xml读取的相关函数的介绍一
2008/06/05 PHP
PHP 作用域解析运算符(::)
2010/07/27 PHP
PHP安全性漫谈
2012/06/28 PHP
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
php多种形式发送邮件(mail qmail邮件系统 phpmailer类)
2014/01/22 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例
2019/05/29 PHP
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
基于jQuery的左右滚动实现代码
2010/12/03 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
2015/10/06 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
jQuery实现键盘回车搜索功能
2017/07/25 jQuery
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
Python常用列表数据结构小结
2014/08/06 Python
python实现ping的方法
2015/07/06 Python
简单谈谈python中的Queue与多进程
2016/08/25 Python
python urllib urlopen()对象方法/代理的补充说明
2017/06/29 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
Python代码实现http/https代理服务器的脚本
2019/08/12 Python
Python使用Matlab命令过程解析
2020/06/04 Python
HelloFresh奥地利:立即订购烹饪盒
2019/02/22 全球购物
学期个人自我总结
2015/02/13 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python
Java 通过手写分布式雪花SnowFlake生成ID方法详解
2022/04/07 Java/Android
Go中使用gjson来操作JSON数据的实现
2022/08/14 Golang