微信小程序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实现控制台控件的代码
Sep 04 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
Jul 29 Javascript
Javascript实现滚动图片新闻的实例代码
Nov 27 Javascript
jQuery实现自定义下拉列表
Jan 05 Javascript
javascript模拟C#格式化字符串
Aug 26 Javascript
Javascript数组Array方法解读
Mar 13 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
Mar 06 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 Javascript
原生js滑动轮播封装
Jul 31 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
js截取函数(indexOf,join等)
2010/09/01 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
简单介绍JavaScript中字符串创建的基本方法
2015/07/07 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
python中的字典详细介绍
2014/09/18 Python
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
Python存取XML的常见方法实例分析
2017/03/21 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
python3.5绘制随机漫步图
2018/08/27 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
解决安装pyqt5之后无法打开spyder的问题
2019/12/13 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
RentCars.com巴西:汽车租赁网站
2016/08/22 全球购物
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
英国现代家具和照明购物网站:Heal’s
2019/10/30 全球购物
.net软件工程师应聘上机试题
2015/03/10 面试题
设计毕业生简历中的自我评价
2013/10/01 职场文书
自动化专业个人求职信范文
2013/11/29 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
2014年基层党支部工作总结
2014/12/04 职场文书
工程质量保证书
2015/05/09 职场文书