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

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>

在这里插入图片描述

  • 完美解决闪烁问题

在这里插入图片描述

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

gitlab使用

gitlab使用

个人笔记&#xff08;整理不易&#xff0c;有帮助点个赞&#xff09; 笔记目录&#xff1a;学习笔记目录_pytest和unittest、airtest_weixin_42717928的博客-CSDN博客 个人随笔&#xff1a;工作总结随笔_8、以前工作中都接触过哪些类型的测试文档-CSDN博客 目录 一&#xff1a…
阅读更多...
【xcode15.3 打包报错 Command SwiftCompile failed with a nonzero exit code】

【xcode15.3 打包报错 Command SwiftCompile failed with a nonzero exit code】

升级Xcode15后 打包报错 xxx Command SwiftCompile failed with a nonzero exit code 解决办法&#xff1a; 选中pod 报错的库 Code Generation->Compilation Mode改成和debug一样的 Incremental。
阅读更多...
智慧水库解决方案（打造水库智慧监测体系）

智慧水库解决方案（打造水库智慧监测体系）

​作为一名水利自动化系统集成商,最近我司接手了一个智慧水库建设项目。这个项目位于一座山区的大型水库,目的是对其进行现代化、智能化改造,提升供水、防洪等管理水平。&#xff08;key-iot.com.cn&#xff09; 在方案设计之初,我们组织了现场勘测,全面了解水库的实际情况。这…
阅读更多...
完全可定制的富文本编辑器：逻辑清晰，插件赋能 | 开源日报 No.218

完全可定制的富文本编辑器：逻辑清晰，插件赋能 | 开源日报 No.218

ianstormtaylor/slate Stars: 28.8k License: MIT slate 是一个完全可定制的框架&#xff0c;用于构建富文本编辑器。 可以构建类似 Medium、Dropbox Paper 或 Google Docs 的富文本编辑器通过一系列插件实现所有逻辑&#xff0c;避免代码复杂度受到 Draft.js、Prosemirror 和…
阅读更多...
最少按键次数

最少按键次数

题目描述 给你一个字符串 s&#xff0c;由小写英文字母组成。 电话键盘上的按键与 不同 小写英文字母集合相映射&#xff0c;可以通过按压按键来组成单词。例如&#xff0c;按键 2 对应 ["a","b","c"]&#xff0c;我们需要按一次键来输入 &quo…
阅读更多...
web前端框架设计第四课-条件判断与列表渲染

web前端框架设计第四课-条件判断与列表渲染

web前端框架设计第四课-条件判断与列表渲染 一.预习笔记 1.条件判断 1-1&#xff1a;v-if指令&#xff1a;根据表达式的值来判断是否输出DOM元素 1-2&#xff1a;template中使用v-if 1-3&#xff1a;v-else 1-4&#xff1a;v-else-if 1-5&#xff1a;v-show&#xff08;不支…
阅读更多...
默克尔（Merkle）树 - 原理及用途

默克尔（Merkle）树 - 原理及用途

默克尔&#xff08;Merkle&#xff09;树的原理以及用途 引言 在当今数字化时代&#xff0c;确保数据的完整性是至关重要的。默克尔树作为一种高效的数据结构&#xff0c;被广泛应用于网络安全、分布式系统以及加密货币等领域&#xff0c;用于验证大量数据的完整性和一致性 数…
阅读更多...
20240408在全志H3平台的Nano Pi NEO CORE开发板的eMMC刷Ubuntu Core 16.04

20240408在全志H3平台的Nano Pi NEO CORE开发板的eMMC刷Ubuntu Core 16.04

20240408在全志H3平台的Nano Pi NEO CORE开发板的eMMC刷Ubuntu Core 16.04 2024/4/8 20:46 参考资料&#xff1a; https://wiki.friendlyelec.com/wiki/index.php/NanoPi_NEO_Core/zh#.E5.AE.89.E8.A3.85.E7.B3.BB.E7.BB.9F [ OK ] Created slice Slice /system/getty. [ …
阅读更多...
linux centos 系统 docker及podman拉取kylin麒麟镜像内部及部署安装Gaussdb数据库

linux centos 系统 docker及podman拉取kylin麒麟镜像内部及部署安装Gaussdb数据库

研究总结来之不易 1.首先下载安装包&#xff0c;网址&#xff1a; 软件包 | openGauss 2.参考安装连接&#xff1a; 单节点安装 openGauss学习笔记-03 openGauss极简版单节点安装_opengauss 笔记-CSDN博客 当然他们说的有些也是不完全一样的&#xff0c;根据自己的环境摸索…
阅读更多...
Flutter之Flex组件布局

Flutter之Flex组件布局

目录 Flex属性值 轴向:direction:Axis.horizontal 主轴方向:mainAxisAlignment:MainAxisAlignment.center 交叉轴方向:crossAxisAlignment:CrossAxisAlignment 主轴尺寸:mainAxisSize 文字方向:textDirection:TextDirection 竖直方向排序:verticalDirection:VerticalDir…
阅读更多...
汇编入门--基础知识（1）

汇编入门--基础知识（1）

1.汇编语言的概念 汇编语言是一种低级编程语言&#xff0c;它与计算机的机器语言非常接近&#xff0c;但比机器语言更易于人类阅读和理解。汇编语言是用一系列的助记符来表示机器语言的操作码和操作数。每种计算机体系结构&#xff08;如x86、ARM等&#xff09;都有自己的汇编语…
阅读更多...
【Spring】一问详解什么是Spring IoC和DI

【Spring】一问详解什么是Spring IoC和DI

目录 一、IoC & DI入门1.1、Spring1.1.1、什么是容器1.1.2、什么是IoC 1.2、IoC介绍1.2.1、传统程序开发1.2.2、问题分析1.2.3、问题解决1.2.4、 IoC优势 1.3、Bean的作用域1.4、DI介绍 二、IoC详解2.1、Bean的存储2.1.1、类注解的使用2.1.2、获取bean对象的其他方式2.1.3、…
阅读更多...
【数据结构】数组（稀疏矩阵、特殊矩阵压缩、矩阵存储、稀疏矩阵的快速转置、十字链表）

【数据结构】数组（稀疏矩阵、特殊矩阵压缩、矩阵存储、稀疏矩阵的快速转置、十字链表）

稀疏矩阵、矩阵压缩、稀疏矩阵的快速转置、十字链表 目录 稀疏矩阵、矩阵压缩、稀疏矩阵的快速转置、十字链表1.数组2.数组的顺序表示和实现3.特殊矩阵的压缩存储&#xff08;1&#xff09;. 上三角矩阵—列为主序压缩存储&#xff08;2&#xff09;. 下三角矩阵—**行为主序压…
阅读更多...
uni-app项目创建方式

uni-app项目创建方式

原生小程序与uni-app的区别 创建uni-app的方式 1.通过HBuilderX创建 2.通过命令行创建 vue3ts版&#xff1a;npx degit dcloudio/uni-preset-vue#vite-ts 项目名称 用vscode开发uni-app项目 安装命令&#xff1a;npm i -D types/wechat-miniprogram uni-helper/uni-app-typ…
阅读更多...
HarmonyOS 应用开发-边缓存边播放案例

HarmonyOS 应用开发-边缓存边播放案例

介绍 OhosVideoCache是一个支持边播放边缓存的库&#xff0c;只需要将音视频的url传递给OhosVideoCache处理之后再设置给播放器&#xff0c; OhosVideoCache就可以一边下载音视频数据并保存在本地&#xff0c;一边读取本地缓存返回给播放器&#xff0c;使用者无需进行其他操作…
阅读更多...
【爬虫+数据清洗+可视化】用Python开发舆情分析文本挖掘“淄博烧烤“可视化大屏

【爬虫+数据清洗+可视化】用Python开发舆情分析文本挖掘“淄博烧烤“可视化大屏

先上效果截图&#xff1a; 动态演示效果&#xff1a; 【大屏演示】Python可视化舆情大屏「淄博烧烤」 主要用到的技术栈&#xff1a; requests 爬虫发送请求json 解析返回数据re 正则表达式清洗文本pandas保存csv文件sqlalchemy 保存MySQL数据pyecharts 可视化开发snownlp 情感…
阅读更多...
17 - 微程序控制

17 - 微程序控制

---- 整理自B站UP主 踌躇月光 的视频 1. 实验目标 将 RAM 中 0 地址内容和 1 地址内容相加&#xff0c;结果存入 2 地址。 需要从 RAM 读取数据 需要寄存器暂存数据 需要从 ROM 中读取控制程序 3 4 > 7 2. 实验过程 【17 - 微程序控制】 2.1 改造 ALU 2.2 程序计数…
阅读更多...
成都欣丰洪泰文化传媒有限公司电商服务的新锐力量

成都欣丰洪泰文化传媒有限公司电商服务的新锐力量

在当今电商行业风起云涌的时代&#xff0c;成都欣丰洪泰文化传媒有限公司以其独特的视角和专业的服务&#xff0c;成为了业内的佼佼者。该公司专注于电商服务&#xff0c;致力于为广大商家提供全方位、多层次的解决方案&#xff0c;助力商家在激烈的市场竞争中脱颖而出。 一、…
阅读更多...
位置编码学习

位置编码学习

基本概念 关于位置编码的一切&#xff1a;https://kexue.fm/archives/8130#T5%E5%BC%8F 残差连接 Post Norm 关注深度 残差的意思是给前面的层搞一条“绿色通道”&#xff0c;让梯度可以更直接地回传&#xff0c;但是在Post Norm中&#xff0c;这条“绿色通道”被严重削弱…
阅读更多...
今日arXiv最热大模型论文：人民大学发布，拯救打工人！Office真实场景下的大模型表格处理

今日arXiv最热大模型论文：人民大学发布，拯救打工人！Office真实场景下的大模型表格处理

引言&#xff1a;大语言模型事实召回机制探索 该论文深入研究了基于Transformer的语言模型在零射击和少射击场景下的事实记忆任务机制。模型通过任务特定的注意力头部从语境中提取主题实体&#xff0c;并通过多层感知机回忆所需答案。作者提出了一种新的分析方法&#xff0c;可…
阅读更多...
最新文章

Copyright @ 2022~2023