微信小程序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代码
Apr 02 Javascript
JS 自动完成 AutoComplete(Ajax 查询)
Jul 07 Javascript
js与applet相互调用的方法
Jun 22 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
Dec 02 Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 Javascript
基于vue2的table分页组件实现方法
Mar 20 Javascript
使用原生js写ajax实例(推荐)
May 31 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
createObjectURL方法实现本地图片预览
Sep 30 Javascript
vue动态合并单元格并添加小计合计功能示例
Nov 26 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
PHP新手上路(十二)
2006/10/09 PHP
php array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
php小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
php 目录遍历、删除 函数的使用介绍
2013/04/28 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
使用pthreads实现真正的PHP多线程(需PHP5.3以上版本)
2014/05/05 PHP
thinkphp查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
php实现简单的守护进程创建、开启与关闭操作
2019/08/13 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
一个用js实现控制台控件的代码
2007/09/04 Javascript
IE的事件传递-event.cancelBubble示例介绍
2014/01/12 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
2017/09/03 Javascript
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
[01:43]倾听DOTA2英雄之声 魅惑魔女国服配音鉴赏
2013/06/06 DOTA
在Python中使用Neo4j数据库的教程
2015/04/16 Python
python实现在windows服务中新建进程的方法
2015/06/30 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
如何在django中实现分页功能
2020/04/22 Python
读取nii或nii.gz文件中的信息即输出图像操作
2020/07/01 Python
工作的心得体会
2013/12/31 职场文书
工作表现评语
2014/01/19 职场文书
光荣入党自我鉴定
2014/01/22 职场文书
教师求职自荐信
2014/03/09 职场文书
2014年小学教导处工作总结
2014/12/19 职场文书
基层党支部承诺书
2015/04/30 职场文书
公司保洁员管理制度
2015/08/04 职场文书
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android