devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：很楠不爱3 | 2024-05-31 10:35:30

赞

踩

uniapp自定义tabbar解决首次加载闪烁

视频教程地址：https://www.bilibili.com/video/BV13m41167iG

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"
		  }
	},

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39

在这里插入图片描述

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

  • 1

在这里插入图片描述

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

  • 1

在这里插入图片描述

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;
	}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

在这里插入图片描述

  • 编写自定义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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39

在这里插入图片描述

  • 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"
			}
		]
	},

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

在这里插入图片描述

  • 在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>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

在这里插入图片描述
在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>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

在这里插入图片描述

  • 成功显示

在这里插入图片描述

完整的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": {}
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70

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>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48

在这里插入图片描述

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

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

<style>

</style>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

在这里插入图片描述

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

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

<style>

</style>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

在这里插入图片描述

  • 完美解决闪烁问题

在这里插入图片描述

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/651840
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号