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


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 相关文章推荐
iframe 自适应高度[在IE6 IE7 FF下测试通过]
Apr 13 Javascript
JavaScript 变量作用域分析
Jul 04 Javascript
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
Aug 18 Javascript
js实现div弹出层的方法
Nov 20 Javascript
javascript实现回车键提交表单方法总结
Jan 10 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
angularJs中$scope数据序列化的实例
Sep 30 Javascript
微信小程序登录session的使用
Mar 17 Javascript
vue-router的两种模式的区别
May 30 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
shell脚本作为保证PHP脚本不挂掉的守护进程实例分享
2013/07/15 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
js中cookie的添加、取值、删除示例代码
2013/10/21 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
chrome不支持form.submit的解决方案
2015/04/28 Javascript
JSON与XML的区别对比及案例应用
2016/11/11 Javascript
Bootstrap导航条鼠标悬停下拉菜单
2017/01/04 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
详解微信小程序开发(项目从零开始)
2019/06/06 Javascript
Vuex实现简单购物车
2021/01/10 Vue.js
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
[01:06]DOTA2小知识课堂 Ep.02 吹风竟可解梦境缠绕
2019/12/05 DOTA
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
Python的Flask框架中集成CKeditor富文本编辑器的教程
2016/06/13 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
Python PyQt4实现QQ抽屉效果
2018/04/20 Python
pycharm不能运行.py文件的解决方法
2020/02/12 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
美容师的职业规划书
2013/12/27 职场文书
拓展培训心得体会
2014/01/04 职场文书
本科毕业生求职自荐信
2014/02/03 职场文书
致跳远运动员加油稿
2014/02/11 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
个人安全生产责任书
2014/07/28 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
大一学生个人总结
2015/02/15 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
教你用eclipse连接mysql数据库
2021/04/22 MySQL
Apache Pulsar结合Hudi构建Lakehouse方案分析
2022/03/31 Servers
python双向链表实例详解
2022/05/25 Python