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


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 相关文章推荐
收集json解析的四种方法分享
Jan 17 Javascript
Javascript判断图片尺寸大小实例分析
Jun 16 Javascript
node.js中的buffer.slice方法使用说明
Dec 10 Javascript
html的DOM中Event对象onblur事件用法实例
Jan 21 Javascript
JQuery实现Ajax加载图片的方法
Dec 24 Javascript
喜大普奔!jQuery发布 3.0 最终版
Jun 12 Javascript
AngularJS中使用ngModal模态框实例
May 27 Javascript
Vue服务器渲染Nuxt学习笔记
Jan 31 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 Javascript
vue实现分页栏效果
Jun 28 Javascript
Vue项目移动端滚动穿透问题的实现
May 19 Javascript
使用AutoJs实现微信抢红包的代码
Dec 31 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
用cookies来跟踪识别用户
2006/10/09 PHP
php使用parse_url和parse_str解析URL
2015/02/22 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
2006/11/30 Javascript
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
Dom 是什么的详细说明
2010/10/25 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
Javascript原型链和原型的一个误区
2014/10/22 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
利用JS制作万年历的方法
2017/08/16 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
2018/02/22 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
Typescript的三种运行方式(小结)
2019/09/18 Javascript
vue设置一开始进入的页面教程
2019/10/28 Javascript
JS实现可视化音频效果的实例代码
2020/01/16 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
原生JavaScript实现购物车
2021/01/10 Javascript
Python自动连接ssh的方法
2015/03/07 Python
python中引用与复制用法实例分析
2015/06/04 Python
Python基础教程之tcp socket编程详解及简单实例
2017/02/23 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
机电一体化专业应届本科生求职信
2013/09/27 职场文书
项目经理岗位职责
2013/11/11 职场文书
小学生国旗下演讲稿
2014/04/25 职场文书
我爱读书演讲稿
2014/05/07 职场文书
写给老师的保证书
2015/05/09 职场文书
诚信高考倡议书
2019/06/24 职场文书
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技