解决小程序自定义底部菜单切换闪动

想个名字想老半天

已于 2023-08-23 16:40:57 修改

阅读量2k

点赞数

CC 4.0 BY-SA版权

文章标签：小程序 javascript 前端

于 2022-07-14 18:37:35 首次发布

本文链接：https://blog.csdn.net/MistShown/article/details/125790251

本文介绍如何解决小程序自定义底部菜单在页面切换时出现的闪动问题，通过创建公共页面并使用组件方式避免底部菜单重新加载，提高用户体验。采用uni开发，实现全面屏安全高度适配，并提供自定义头部的适配方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决小程序自定义底部菜单切换闪动

下方代码中获取全面平来适配安全高度的可以转移到我的另一篇文章

安全高度适配

业务上可能会有一个需求使用自定义底部菜单相信会有很多人遇到过这个需求

但是自定义底部菜单会有一个问题，在点击切换页面的时候底部菜单会重新加载，导致页面闪动，比较影响用户的体验性；

我采用的解决办法是建立一个公共的页面，所有底部菜单的对应页面采用组件的方法，这样可以解决底部菜单切换时闪动的问题；

我用的是uni开发的代码上可能与原生小程序有所差异，整体思路其实是一样的

头部我用的是自定义的头部，适配了不同机型（可能会有偏差）

接下来开始吧

1.新建一个indexRouter.vue的页面

<template>
	<view style="position: relative;" :class="nowchos==1?'bg_index_top':''">
		<home ref='home' v-if="nowchos == 1"></home>
		<curriculum v-if="nowchos == 2"></curriculum>
		<business v-if="nowchos == 3"></business>
		<circle v-if="nowchos == 4"></circle>
		<mine ref='mine' v-if="nowchos == 5"></mine>
		<view class="bottomboxs">
			//底部组件
			<navbottom :nowchos='nowchos' @botomchos='botomchos'></navbottom>
		</view>
	</view>
</template>

<script>
	import navbottom from '@/components/navbottom.vue'//引入 底部菜单组件
	import home from './index/index.vue'// 引入 首页
	import business from './business.vue'// 同上 引入相关页面
	import circle from './circle.vue'// 同上 引入相关页面
	import mine from './mine.vue'// 同上 引入相关页面
	import curriculum from './curriculum.vue'// 同上 引入相关页面
	export default {
   
   
		components: {
   
   //在这里注册相应的组件
			home,
			business,
			circle,
			mine,
			curriculum,
			navbottom
		},
		data() {
   
   
			return {
   
   
				nowchos: 1, //当前选择了那个底部菜单
				navtit: '页面标题',
				full: false, //是否全面屏
				bigscroll: false, //是否固定头部
			}
		},
		watch: {
   
   
			nowchos(e) {
   
   
				console.log(e);//可以监听 底部菜单的切换
			}
		},
		onPullDownRefresh() {
   
   //监听页面刷新 可以实现刷新重新请求组件里的接口重新渲染
			if(this.nowchos == 1){
   
   
				this.$refs.home.getlis