uniapp引入微信小程序版本VantUI，使用VantUI的自定义tabbar，并解决自定义tabbar出现闪烁的情况

news2024/11/27 2:37:11

1.uniapp引入微信小程序版本VantUI

去vant官网下载源码，源码放在github，自行去下载下来
https://vant-contrib.gitee.io/vant-weapp/#/home

在这里插入图片描述

  • 在pages.json的globalStyle里面注册组件
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		//全局注册方式1 单个组件
		"usingComponents": {
		  "van-tabbar": "/wxcomponents/vant/dist/tabbar/index",
		  "van-tabbar-item": "/wxcomponents/vant/dist/tabbar-item/index",
		  "van-search": "/wxcomponents/vant/dist/search/index",
		  "van-dialog": "/wxcomponents/vant/dist/dialog/index",
		  "van-field": "/wxcomponents/vant/dist/field/index",
		  "van-cell-group": "/wxcomponents/vant/dist/cell-group/index",
		  "van-divider": "/wxcomponents/vant/dist/divider/index",
		  "van-cell": "/wxcomponents/vant/dist/cell/index",
		  "van-button": "/wxcomponents/vant/dist/button/index",
		  "van-action-sheet": "/wxcomponents/vant/dist/action-sheet/index",
		  "van-uploader": "/wxcomponents/vant/dist/uploader/index",
		  "van-notify": "/wxcomponents/vant/dist/notify/index",
		  "van-icon": "/wxcomponents/vant/dist/icon/index",
		  "van-switch": "/wxcomponents/vant/dist/switch/index",
		  "van-radio": "/wxcomponents/vant/dist/radio/index",
		  "van-radio-group": "/wxcomponents/vant/dist/radio-group/index",
		  "van-popup": "/wxcomponents/vant/dist/popup/index",
		  // "van-overlay": "/wxcomponents/vant/dist/overlay/index",
		  "van-cascader": "/wxcomponents/vant/dist/cascader/index",
		  "van-card": "/wxcomponents/vant/dist/card/index",
		  "van-submit-bar": "/wxcomponents/vant/dist/submit-bar/index",
		  "van-notice-bar": "/wxcomponents/vant/dist/notice-bar/index",
		  "van-checkbox": "/wxcomponents/vant/dist/checkbox/index",
		  "van-empty": "/wxcomponents/vant/dist/empty/index",
		  "van-steps": "/wxcomponents/vant/dist/steps/index",
		  "van-toast": "/wxcomponents/vant/dist/toast/index"
		  },
		  "app-plus": {
		  	"softinputNavBar": "none",
			"scrollIndicator": "none"
		  }
	},

在这里插入图片描述

  • 引入CSS样式
@import "/wxcomponents/vant/dist/common/index.wxss";

在这里插入图片描述

  • 在页面中引入按钮组件
<van-button type="primary">主要按钮</van-button>

在这里插入图片描述

2.自定义tabbar（点击跳转的时候tabbar会出现闪烁）

  • 设置自定义tabbar样式
	/* 隐藏原生tabbar */
	.uni-tabbar-bottom{
		display: none !important;
	}
	/* 使用vant-ui tabbar */
	.van-tabbar-bottom{
		position: fixed !important;
		bottom: 0 !important;
		width: 100% !important;
		z-index: 99999999 !important;
		border-top: 0 solid #ebedf0 !important;
		border-bottom-style: hidden !important;
	}
	.van-hairline--top-bottom:after{
		border-top-width: 1px !important;
		border-right-width: 0px !important;
		border-bottom-width: 0px !important;
		border-left-width: 0px !important;
	}

在这里插入图片描述

  • 编写自定义tabbar组件
<template>
	<view>
		<view class="van-tabbar-bottom">
			<van-tabbar :active="active" @change="onChange" :border="true" active-color="#898dda" inactive-color="#9c9c9c">
				<van-tabbar-item icon="chat-o">首页</van-tabbar-item>
				<van-tabbar-item icon="contact">我的</van-tabbar-item>
			</van-tabbar>
		</view>
	</view>
</template>

<script>
	import Toast from '@/wxcomponents/vant/dist/toast/toast';
	export default {
		name: "tabbar",
		data() {
			return {
				tabbarList: {
					0: "/pages/index/index",
					1: "/pages/my/my",
				},
			}
		},
		props: {
			active: Number
		},
		methods: {
			onChange(index) {
				uni.switchTab({
					url: this.tabbarList[index.detail]
				})
			},
		}
	}
</script>

<style scoped>

</style>

在这里插入图片描述

  • pages.json中设置tabbar
	"tabBar": {
		"custom": true,// 隐藏原生tabar 仅h5和微信小程序
		"height":"0.1rpx",// app 隐藏原生tabar需要将高度设置成最小0.1px rpx
		"borderStyle":"white",
		"list": [{
				"pagePath": "pages/index/index"
			},
			{
				"pagePath": "pages/my/my"
			}
		]
	},

在这里插入图片描述

  • 在index.vue页面中调用自定义的tabbar
<template>
	<view class="content">
		首页
		<van-button type="primary">主要按钮</van-button>
		<view class="foot">
			<tabbar :active="0"></tabbar>
		</view>
	</view>

</template>

<script>
	import tabbar from "@/components/tabbar/tabbar"
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	
</style>

在这里插入图片描述
在my.vue页面中调用自定义的tabbar

<template>
	<view>
		我的
		<view class="foot">
			<tabbar :active="1"></tabbar>
		</view>
	</view>

</template>

<script>
	import tabbar from "@/components/tabbar/tabbar"
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

在这里插入图片描述

  • 成功显示

在这里插入图片描述

完整的pages.json配置

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "index"
			}
		}
	    ,{
            "path" : "pages/my/my",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "my"
            }
            
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		//全局注册方式1 单个组件
		"usingComponents": {
		  "van-tabbar": "/wxcomponents/vant/dist/tabbar/index",
		  "van-tabbar-item": "/wxcomponents/vant/dist/tabbar-item/index",
		  "van-search": "/wxcomponents/vant/dist/search/index",
		  "van-dialog": "/wxcomponents/vant/dist/dialog/index",
		  "van-field": "/wxcomponents/vant/dist/field/index",
		  "van-cell-group": "/wxcomponents/vant/dist/cell-group/index",
		  "van-divider": "/wxcomponents/vant/dist/divider/index",
		  "van-cell": "/wxcomponents/vant/dist/cell/index",
		  "van-button": "/wxcomponents/vant/dist/button/index",
		  "van-action-sheet": "/wxcomponents/vant/dist/action-sheet/index",
		  "van-uploader": "/wxcomponents/vant/dist/uploader/index",
		  "van-notify": "/wxcomponents/vant/dist/notify/index",
		  "van-icon": "/wxcomponents/vant/dist/icon/index",
		  "van-switch": "/wxcomponents/vant/dist/switch/index",
		  "van-radio": "/wxcomponents/vant/dist/radio/index",
		  "van-radio-group": "/wxcomponents/vant/dist/radio-group/index",
		  "van-popup": "/wxcomponents/vant/dist/popup/index",
		  // "van-overlay": "/wxcomponents/vant/dist/overlay/index",
		  "van-cascader": "/wxcomponents/vant/dist/cascader/index",
		  "van-card": "/wxcomponents/vant/dist/card/index",
		  "van-submit-bar": "/wxcomponents/vant/dist/submit-bar/index",
		  "van-notice-bar": "/wxcomponents/vant/dist/notice-bar/index",
		  "van-checkbox": "/wxcomponents/vant/dist/checkbox/index",
		  "van-empty": "/wxcomponents/vant/dist/empty/index",
		  "van-steps": "/wxcomponents/vant/dist/steps/index",
		  "van-toast": "/wxcomponents/vant/dist/toast/index"
		  },
		  "app-plus": {
		  	"softinputNavBar": "none",
			"scrollIndicator": "none"
		  }
	},
	"tabBar": {
		"custom": true,// 隐藏原生tabar 仅h5和微信小程序
		"height":"0.1rpx",// app 隐藏原生tabar需要将高度设置成最小0.1px rpx
		"borderStyle":"white",
		"list": [{
				"pagePath": "pages/index/index"
			},
			{
				"pagePath": "pages/my/my"
			}
		]
	},
	"uniIdRouter": {}
}

3.自定义tabbar（解决点击跳转的时候tabbar出现闪烁）

  • 互换位置，把tabbar写成页面，index和my写成组件，然后在tabbar页面中引入index和my组件切换即可

···

  • pages.json中去掉tabbar配置，在pages:[]配置页面中只需要配置tabbar这个页面即可

在这里插入图片描述

  • tabbar.vue页面
<template>
	<view>
		
		<!-- 组件页面 -->
		<view class="component-page">
			<index v-if="active == 0"></index>
			<my v-if="active == 1"></my>
		</view>

		<!-- tabbar -->
		<view class="van-tabbar-bottom">
			<van-tabbar :active="active" @change="onChange" :border="true" active-color="#898dda" inactive-color="#9c9c9c">
				<van-tabbar-item icon="chat-o">首页</van-tabbar-item>
				<van-tabbar-item icon="contact">我的</van-tabbar-item>
			</van-tabbar>
		</view>
		
	</view>

</template>

<script>
	import index from '@/components/index/index.vue'
	import my from '@/components/my/my.vue'
	export default {
		name: "tabbar",
		data() {
			return {
				active: 0
			}
		},
		components:{
			index,
			my
		},
		methods: {
			onChange(index) {
				console.log(index.detail)
				this.active = index.detail
			},
		}
	}
</script>

<style>

</style>

在这里插入图片描述

  • index.vue组件
<template>
	<view>
		我是index
	</view>
</template>

<script>
	export default {
		name:"index",
		data() {
			return {
				
			};
		}
	}
</script>

<style>

</style>

在这里插入图片描述

  • my.vue组件
<template>
	<view>
		我是my
	</view>
</template>

<script>
	export default {
		name:"my",
		data() {
			return {
				
			};
		}
	}
</script>

<style>

</style>

在这里插入图片描述

  • 完美解决闪烁问题

在这里插入图片描述

值得注意的一点时，如果这样子修改，可能会造成生命周期的改变，所以写的时候需要多注意一下

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1577458.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

zookeeper源码(12)命令行客户端

zookeeper源码(12)命令行客户端

zkCli.sh脚本 这个命令行脚本在bin目录下： ZOOBIN="${BASH_SOURCE-$0}" ZOOBIN="$(dirname "${ZOOBIN}")" ZOOBINDIR="$(cd "${ZOOBIN}"; pwd)"# 加载zkEnv.sh脚本 if [ -e "$ZOOBIN/../libexec/zkEnv.sh" ]; …
阅读更多...
程序员开展副业的有效方法

程序员开展副业的有效方法

目录 1 项目咨询1.1 建立个人品牌和专业形象1.2 寻找潜在客户1.3 提供定制化的技术咨询方案 2 软件开发2.1 加入平台寻找项目2.2 展示个人作品2.3 与客户保持良好沟通 3 传授编程知识3.1 选择适合的分享平台3.2 创作有价值的内容3.3 与观众保持互动 4 教育培训4.1 利用在线教育…
阅读更多...
RuoYi-Vue若依框架-在框架内用颜色选择器，页面显示色块

RuoYi-Vue若依框架-在框架内用颜色选择器，页面显示色块

在用若依框架进行二次开发的时候写到自己的一个模块&#xff0c;其中涉及到颜色&#xff0c;我就想着是手动输入还是采用颜色选择器呢&#xff0c;考虑到后续涉及到另一个字段编码于时就采用了颜色选择器&#xff0c;选择完的颜色显示的是十六进制的颜色选择器&#xff0c;这时…
阅读更多...
零基础学鸿蒙开发可以吗？看完这份鸿蒙入门学习资料就够了！

零基础学鸿蒙开发可以吗？看完这份鸿蒙入门学习资料就够了！

一、面向人群 1、在校学生、应届毕业生 2、转行人员&#xff0c;希望赶上时代风口&#xff0c;成功求职、转行 3、IT相关工作者&#xff0c;想快速提升技能&#xff0c;升职加薪的朋友 ps&#xff1a;文末可以申请免费试学 二、学习路线 HarmonyOS基础技能HarmonyOS就业…
阅读更多...
数据库引论:3、中级SQL

数据库引论:3、中级SQL

3.中级SQL 一些更复杂的查询表达 3.1 连接表达式 拼接多张表的几种方式 3.1.1 自然连接 natural join&#xff0c;自动连接在所有共同属性上相同的元组 join… using( A 1 , A 2 , ⋯ A_1,A_2,\cdots A1​,A2​,⋯):使用括号里的属性进行自然连接&#xff0c;除了这些属性…
阅读更多...
rsync+inotify组合实现及时远程同步

rsync+inotify组合实现及时远程同步

目录 Rsync&#xff08;Remote Sync&#xff09;简介&#xff1a; Rsync 主要特点&#xff1a; Rsync 常用命令选项&#xff1a; Inotify 简介&#xff1a; Inotify 的主要功能&#xff1a; 结合 Rsync 和 Inotify 实现实时同步&#xff1a; 操作步骤&#xff1a; 配置…
阅读更多...
蓝桥杯第六届c++大学B组详解

蓝桥杯第六届c++大学B组详解

前言&#xff1a; 看了很多博客以及视频讲解&#xff0c;感觉都不是很清楚&#xff0c;比较模棱两可&#xff0c;所以干脆自己一边想&#xff0c;一边写博客&#xff0c;也可帮助到其他人&#xff0c;都是根据自己的逻辑来尽量清楚简单的讲清楚题目&#xff0c;喜欢的不要吝啬三…
阅读更多...
RequestMapping注解

RequestMapping注解

一、RequestMapping的作用 RequestMapping 注解是 Spring MVC 框架中的一个控制器映射注解&#xff0c;用于将请求映射到相应的处理方法上。具体来说&#xff0c;它可以将指定 URL 的请求绑定到一个特定的方法或类上&#xff0c;从而实现对请求的处理和响应。 二、RequestMappi…
阅读更多...
互联网需要做安全防护吗？

互联网需要做安全防护吗？

互联网需要做安全防护&#xff0c;因为网络攻击的风险随时存在。一旦遭受大规模攻击&#xff0c;企业很可能会受到严重影响&#xff0c;甚至会造成巨大的经济损失和品牌声誉受损。因此&#xff0c;建议企业在安全防护方面做好以下几点&#xff1a; 加强网络安全意识教育&#x…
阅读更多...
linux基础篇：Linux中磁盘的管理（分区、格式化、挂载）

linux基础篇：Linux中磁盘的管理（分区、格式化、挂载）

Linux中磁盘的管理&#xff08;分区、格式化、挂载&#xff09; 一、认识磁盘 1.1 什么是磁盘 磁盘是一种计算机的外部存储器设备&#xff0c;由一个或多个覆盖有磁性材料的铝制或玻璃制的碟片组成&#xff0c;用来存储用户的信息&#xff0c;这种信息可以反复地被读取和改写…
阅读更多...
python WAV音频文件处理—— (2)处理PCM音频-- waveio包

python WAV音频文件处理—— (2)处理PCM音频-- waveio包

破译 PCM-Encoded 的音频样本 这部分将变得稍微高级一些&#xff0c;但从长远来看&#xff0c;它将使在 Python 中处理 WAV 文件变得更加容易。 在本教程结束时&#xff0c;我们将构建出 waveio 包&#xff1a; waveio/ │ ├── __init__.py ├── encoding.py ├── met…
阅读更多...
在git上先新建仓库-把本地文件提交远程

在git上先新建仓库-把本地文件提交远程

一.在git新建远程项目库 1.选择新建仓库 以下以gitee为例 2.输入仓库名称&#xff0c;点击创建 这个可以选择仓库私有化还公开权限 3.获取仓库clone链接 这里选择https模式就行&#xff0c;就不需要配置对电脑进行sshkey配置了。只是需要每次提交输入账号密码 二、远…
阅读更多...
解决网站“不安全”、“不受信”、“排名下降”，你需要——「SSL证书」

解决网站“不安全”、“不受信”、“排名下降”，你需要——「SSL证书」

在网络时代&#xff0c;确保网站用户数据安全显得愈发关键。SSL证书作为网络安全的关键要素&#xff0c;对网站而言具有重大意义。 SSL&#xff08;Secure Sockets Layer&#xff09;证书是一种数字证书&#xff0c;用于加密和验证网络通信。它存在于客户端&#xff08;浏览…
阅读更多...
【小白学机器学习12】假设检验之3：t 检验 （t检验量，t分布，查t值表等）

【小白学机器学习12】假设检验之3：t 检验 （t检验量，t分布，查t值表等）

目录 1 t 检验的定义 1.1 来自维基百科和百度百科 1.2 别名 1.3 和其他检验的区别 2 适用情况&#xff1a; 2.1 关于样本情况 2.2 适合检查的情况 2.2.1 单样本均值检验&#xff08;One-sample t-test&#xff09; 2.2.2 两独立样本均值检验&#xff08;Independent …
阅读更多...
【随笔】Git 高级篇 -- 提交的技巧（上） rebase commit --amend（十八）

【随笔】Git 高级篇 -- 提交的技巧（上） rebase commit --amend（十八）

&#x1f48c; 所属专栏&#xff1a;【Git】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f496; 欢迎大…
阅读更多...
鸿蒙南向开发：【智能烟感】

鸿蒙南向开发：【智能烟感】

样例简介 智能烟感系统通过实时监测环境中烟雾浓度&#xff0c;当烟雾浓度超标时&#xff0c;及时向用户发出警报。在连接网络后&#xff0c;配合数字管家应用&#xff0c;用户可以远程配置智能烟感系统的报警阈值&#xff0c;远程接收智能烟感系统报警信息。实现对危险及时报…
阅读更多...
python 如何生成uuid

python 如何生成uuid

UUID&#xff08;Universally Unique Identifier&#xff09;是通用唯一识别码&#xff0c;在许多领域用作标识&#xff0c;比如我们常用的数据库也可以用它来作为主键&#xff0c;原理上它是可以对任何东西进行唯一的编码的。作为新手一看到类似varchar(40)这样的主键就觉得有…
阅读更多...
ctf刷题记录2（更新中）

ctf刷题记录2（更新中）

因为csdn上内容过多编辑的时候会很卡&#xff0c;因此重开一篇&#xff0c;继续刷题之旅。 NewStarCTF 2023 WEEK3 Include &#x1f350; <?phperror_reporting(0);if(isset($_GET[file])) {$file $_GET[file];if(preg_match(/flag|log|session|filter|input|data/i, $…
阅读更多...
笔记 | 编译原理L1

笔记 | 编译原理L1

重点关注过程式程序设计语言编译程序的构造原理和技术 1 程序设计语言 1.1 依据不同范型 过程式(Procedural programming languages–imperative)函数式(Functional programming languages–declarative)逻辑式(Logical programming languages–declarative)对象式(Object-or…
阅读更多...
解决游戏霍格沃兹找不到EMP.dll问题的5种方法

解决游戏霍格沃兹找不到EMP.dll问题的5种方法

在玩《霍格沃兹》游戏时&#xff0c;我们可能会遇到一些错误提示&#xff0c;其中之一就是“缺少dll文件”。其中&#xff0c;EMP.dll文件丢失是一个常见的问题。这个问题可能会导致游戏无法正常运行或出现各种错误。为了解决这个问题&#xff0c;本文将介绍5种解决方法&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023