微信小程序实现自定义底部导航


Posted in Javascript onNovember 18, 2020

本文实例为大家分享了微信小程序实现底部导航的具体代码,供大家参考,具体内容如下

微信小程序实现自定义底部导航

建一个tabbar.wxml组件

<template name="tabBar">
 <view class="tab-bar" style="color: {{tabBar.color}}; background: {{tabBar.backgroundColor}}; {{tabBar.position=='top'? 'top: 0' : 'bottom: 0'}};">
 <block wx:for="{{tabBar.list}}" wx:key="pagePath">
 <navigator hover-class="none" url="{{item.pagePath}}" open-type="redirect" class="tabbar_item {{item.clas}}" style="{{item.active? 'color: '+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : ''}};position:relative;">
 <image src="{{item.selectedIconPath}}" wx:if="{{item.active&&item.selectedIconPath}}" class="img"></image>
 <image src="{{item.iconPath}}" wx:if="{{!item.active&&item.iconPath}}" class="img"></image>
 <image src="{{item.logo}}" wx:if="{{item.logo}}" style="width:110rpx;height:110rpx;border:10rpx solid #ffffff;border-radius:50%;position:absolute;top:-50%;left:-40%,"></image>
 <text class="tabbar_text" wx:if="{{item.text}}">{{item.text}}</text>
 </navigator>
 </block>
 </view>
</template>

app.js中定义

editTabBar: function () {
 //使用getCurrentPages可以获取当前加载中所有的页面对象的一个数组,数组最后一个就是当前页面。

 var curPageArr = getCurrentPages(); //获取加载的页面
 var curPage = curPageArr[curPageArr.length - 1]; //获取当前页面的对象
 var pagePath = curPage.route; //当前页面url
 if (pagePath.indexOf('/') != 0) {
 pagePath = '/' + pagePath;
 }

 var tabBar = this.globalData.tabBar;
 for (var i = 0; i < tabBar.list.length; i++) {
 tabBar.list[i].active = false;
 if (tabBar.list[i].pagePath == pagePath) {
 tabBar.list[i].active = true; //根据页面地址设置当前页面状态 
 }
 }
 curPage.setData({
 tabBar: tabBar
 });
 },
 globalData: {
 tabBar: {
 "color": "#B0B6B8",
 "selectedColor": "#4877BD",
 "backgroundColor": "#ffffff",
 "borderStyle": "#ccc",
 "list": [{
 "pagePath": "/pages/messagelist/messagelist",
 "text": "消息",
 "iconPath": "/img/message-1.png",
 "selectedIconPath": "/img/message-2.png",
 "selectedColor": "#4877BD",
 "clas": "menu-item",
 active: false
 },
 {
 "pagePath": "/pages/salefriend/salefriend",
 "text": "名片",
 "iconPath": "/img/card-1.png",
 "selectedIconPath": "/img/card-2.png",
 "selectedColor": "#4877BD",
 "clas": "menu-item",
 active: false
 },
 {
 "pagePath": "/pages/customnav/customnav",
 "text": "",
 // "iconPath": "/img/gifts.png",
 // "selectedIconPath": "/img/gifts.png",
 "logo":"/img/logo.png",
 "selectedColor": "#4877BD",
 "clas": "menu-item",
 islogo:true,
 active: false
 },
 {
 "pagePath": "/pages/salescircle/salescircle",
 "text": "发现",
 "iconPath": "/img/discover-1.png",
 "selectedIconPath": "/img/discover-2.png",
 "selectedColor": "#4877BD",
 "clas": "menu-item",
 active: false
 },
 {
 "pagePath": "/pages/mine/mine",
 "text": "我的",
 "iconPath": "/img/mine-1.png",
 "selectedIconPath": "/img/mine-2.png",
 "selectedColor": "#4877BD",
 "clas": "menu-item",
 active: false
 }
 ],
 "position": "bottom"
 },
 },

在需要用的导航的页面的wxml

<import src="/components/tabbar.wxml" />
<template is="tabBar" data="{{tabBar}}" />

在需要用的导航的页面的js中

const app = getApp();
 onShow: function () {
 app.editTabBar(); //显示自定义的底部导航

 },

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript学习笔记1 数据类型
Jan 11 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
Jun 14 Javascript
js实现可拖动DIV的方法
Dec 17 Javascript
jquery制作select列表双向选择示例代码
Sep 02 Javascript
js控制鼠标事件移动及移出效果显示
Oct 19 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
JavaScript模仿Pinterest实现图片预加载功能
Oct 25 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
angularjs的单选框+ng-repeat的实现方法
Sep 12 Javascript
vue-cli 3.x 修改dist路径的方法
Sep 19 Javascript
vue路由跳转传参数的方法
May 06 Javascript
微信小程序绘制半圆(弧形)进度条
Nov 18 #Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 #Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 #Javascript
解决js中的setInterval清空定时器不管用问题
Nov 17 #Javascript
springboot+vue实现文件上传下载
Nov 17 #Vue.js
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 #Vue.js
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 #Vue.js
You might like
NO3第三帝国留言簿制作过程
2006/10/09 PHP
PHP date函数参数详解
2006/11/27 PHP
php 表单数据的获取代码
2009/03/10 PHP
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)
2020/07/24 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
javascript常用函数(2)
2015/11/05 Javascript
JS判断字符串变量是否含有某个字串的实现方法
2016/06/03 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
详解react服务端渲染(同构)的方法
2017/09/21 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
jquery简易手风琴插件的封装
2020/10/13 jQuery
[01:20:47]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第一场 1月19日
2021/03/11 DOTA
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
python实现解数独程序代码
2017/04/12 Python
Python selenium实现微博自动登录的示例代码
2018/05/16 Python
简单了解Django ContentType内置组件
2019/07/23 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
html5教程画矩形代码分享
2013/12/04 HTML / CSS
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
法国和欧洲海边和滑雪度假:Pierre & Vacances
2017/01/04 全球购物
基于Python 函数和方法的区别说明
2021/03/24 Python
函授毕业生的自我鉴定
2013/11/26 职场文书
家长对小学生的评语
2014/01/28 职场文书
副处级干部考察材料
2014/05/17 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
经典毕业生求职信
2014/07/12 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
React forwardRef的使用方法及注意点
2021/06/13 Javascript
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL