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


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 相关文章推荐
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
Nov 07 Javascript
Javascript实现返回上一页面并刷新的小例子
Dec 11 Javascript
javascript数组操作总结和属性、方法介绍
Apr 05 Javascript
jQuery Ajax调用WCF服务详细教程
Mar 31 Javascript
jQuery实现定时读取分析xml文件的方法
Jul 16 Javascript
每天一篇javascript学习小结(Date对象)
Nov 13 Javascript
JS中递归函数
Jun 17 Javascript
简单实现js选项卡切换效果
Feb 09 Javascript
详解Angular Reactive Form 表单验证
Jul 06 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 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
PHP+ajax 无刷新删除数据
2010/02/20 PHP
深入了解PHP中的Array数组和foreach
2016/11/06 PHP
PHP 中常量的知识整理
2017/04/14 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
取选中的radio的值
2010/01/11 Javascript
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
JS弹出可拖拽可关闭的div层完整实例
2015/02/13 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
微信小程序  wx.request合法域名配置详解
2016/11/23 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
2019/09/26 Javascript
Vue组件模板及组件互相引用代码实例
2020/03/11 Javascript
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
使用python 获取进程pid号的方法
2014/03/10 Python
使用Python来开发微信功能
2018/06/13 Python
浅谈flask源码之请求过程
2018/07/26 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
大学生实习期自我评价范文
2013/10/03 职场文书
会务接待方案
2014/02/27 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
国家助学贷款承诺书
2015/04/30 职场文书
2015年学校消防安全工作总结
2015/10/14 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
MySQL数据迁移相关总结
2021/04/29 MySQL
nginx服务器的下载安装与使用详解
2021/08/02 Servers