Solve the flashing of the menu switch at the bottom of applet customization

Solve the flashing of the menu switch at the bottom of applet customization

There may be a need in business Use the custom bottom menu I believe many people have met this demand

But there is a problem with customizing the bottom menu , When you click to switch pages, the bottom menu will reload , Cause the page to flash , Compare the user experience ;

My solution is to create a public page , All the corresponding pages of the bottom menu adopt the component method , This can solve the problem of flashing when switching the bottom menu ;

I use it uni The developed code may be different from the native applet , The overall idea is actually the same

I use a custom header , Adapted to different models （ There may be deviations ）

Let's start

1. Create a new one indexRouter.vue The page of

<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">
			// Bottom assembly 
			<navbottom :nowchos='nowchos' @botomchos='botomchos'></navbottom>
		</view>
	</view>
</template>

<script>
	import navbottom from '@/components/navbottom.vue'// introduce   Bottom menu component 
	import home from './index/index.vue'//  introduce   home page 
	import business from './business.vue'//  ditto   Introduce relevant pages 
	import circle from './circle.vue'//  ditto   Introduce relevant pages 
	import mine from './mine.vue'//  ditto   Introduce relevant pages 
	import curriculum from './curriculum.vue'//  ditto   Introduce relevant pages 
	export default {
    
		components: {
    // Register the corresponding components here 
			home,
			business,
			circle,
			mine,
			curriculum,
			navbottom
		},
		data() {
    
			return {
    
				nowchos: 1, // The bottom menu is currently selected 
				navtit: ' The page title ',
				full: false, // Whether the screen is fully displayed 
				bigscroll: false, // Whether the head is fixed 
			}
		},
		watch: {
    
			nowchos(e) {
    
				console.log(e);// Can monitor   Switch the bottom menu 
			}
		},
		onPullDownRefresh() {
    // Monitor page refresh   You can refresh and re request the interface in the component to re render 
			if(this.nowchos == 1){
    
				this.$refs.home.getlist()
				setTimeout(()=>{
    
					uni.stopPullDownRefresh()
				},500)
			}else if(this.nowchos == 2){
    
				
			}else if(this.nowchos == 3){
    
				
			}else if(this.nowchos == 5){
    
				
			}
		},
		onLoad(e) {
    
			let that = this;
			// Determine whether it is a full screen 
			uni.getSystemInfo({
    
				success: function(res) {
    
					if (res.model.search(/iPhone\sX|iPhone\s11|iPhone\s12|iPhone\s13/) != -1) {
    
						that.full = true
					} else {
    
						that.full = false
					}
				}
			});
		},
		onPageScroll(e) {
    
			// If the height is more than   Fix the custom header 
			if (e.scrollTop > 60)
				this.bigscroll = true
			else
				this.bigscroll = false
		},
		methods: {
    
			botomchos(e) {
    
				this.nowchos = e
				if (e == 1) {
    
					this.navtit = ' I'm the menu 1'
				} else if (e == 2) {
    
					this.navtit = ' I'm the menu 2'
				} else if (e == 3) {
    
					this.navtit = ' I'm the menu 3'
				} else if (e == 4) {
    
					this.navtit = ' I'm the menu 4'
				} else if (e == 5) {
    
					this.navtit = ' I'm the menu 5'
				}
			}
		}
	}
</script>

<style lang="scss">
	.bg_index {
    
		position: absolute;
		top: 0;
		left: 0;
		width: 580rpx;
		height: 474rpx;
		background: rgba(172, 126, 255, 0.1);
		filter: blur(50rpx);
	}
	
	.bg_index_top{
    
		background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 13%, #F0F0F0 50%, #F7F7F7 100%);
	}

	.headerfix {
    
		position: fixed !important;
		top: 0;
		left: 0;
		background-color: #FFFFFF;
		z-index: 3 !important;

		.title {
    
			color: #000000 !important;
		}
	}

	.fullcss {
    
		padding-top: 100rpx !important;
	}

	.headerBox {
    
		width: 100vw;
		position: relative;
		box-sizing: border-box;
		padding: 60rpx 30rpx 20rpx;
		transition: 500ms all;
		z-index: 2;

		.title {
    
			position: absolute;
			left: 50%;
			font-size: 16px;
			font-weight: 500;
			color: #000000;
			transform: translate(-50%, 0%);
		}
	}
	.bottomboxs{
    
		position: relative;
		z-index: 99;
	}
</style>

2. Create a new bottom component navbottom.vue

<template>
	<view class="">
		<view class="flexcenter navmainbox" :style="full?'height:130rpx;padding-bottom:30rpx;z-index:100;':''">
			<view v-for="(item,index) in list[0]" :key="index"
				class="navcont" @click="gonavs(item,index)">
				<image style="width: 52rpx;height: 52rpx;" :src="nowchos==(index+1)?item.chosicon:item.icon" ></image>
				<view :class="nowchos==(index+1)?'navchosboxb':''">{
    {
    item.name}}</view>
			</view>
		</view>
		// prevent   The fixed bottom menu blocks the content on the page 
		<view class="navmainbox" style="position: relative;opacity: 0;z-index: 0;" :style="full?'height:130rpx':''"></view>
	</view>
</template>

<script>
	export default {
    
		name: 'navbottom',
		data() {
    
			return {
    
				full:false,// Whether the screen is fully displayed 
				list: [
					[{
    
							name: ' home page ',// The bottom menu shows the file 
							icon: "/static/business/home.png",// Icon when the bottom menu is not activated 
							chosicon: '/static/business/homes.png',// Active Icon 
							//path: "/pages_business/index/index"// The path to jump （ No need to add ）
						},
						{
    
							name: ' page ',
							icon: '/static/business/class.png',
							chosicon: '/static/business/classs.png',
							//path: '/pages_business/curriculum'
						},
						{
    
							name: ' page ',
							icon: '/static/business/business.png',
							chosicon: '/static/business/businesss.png',
							//path: '/pages_business/business'
						},
						{
    
							name: ' page ',
							icon: '/static/business/chat.png',
							chosicon: '/static/business/chats.png',
							//path: '/pages_business/circle'
						},
						{
    
							name: ' my ',
							icon: '/static/business/mine.png',
							chosicon: '/static/business/mines.png',
							//path: '/pages_business/mine'
						}
					]
				],// Bottom menu array 
			}
		},
		props: {
    
			nowchos: {
    // Receive the currently active subscript at the bottom 
				type: Number,
				default: 1
			}
		},
		mounted() {
    
			let that = this;
			that.$nextTick(() => {
    
			// Determine whether it is a full screen  
				uni.getSystemInfo({
    
					success: function (res) {
    
						if (res.model.search(/iPhone\sX|iPhone\s11|iPhone\s12|iPhone\s13/) != -1) {
    
							that.full = true
						} else {
    
							that.full = false
						}
					}
				});
			})
		},
		methods: {
    
			gonavs(e,cindex) {
    
				if(index==1){
    
					// Tell the parent where to jump 
					this.$emit('botomchos',cindex+1)
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	view{
    
		box-sizing: border-box;
	}
	.navmainbox {
    
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 112rpx;
		background-color: #FFFFFF;
		border-top: 1rpx solid #ebebeb;
		box-shadow: 0 2rpx 12rpx 0 rgba(0, 0, 0, 0.1);
		font-size: 24rpx;
		padding: 14rpx 0 10rpx;
		z-index: 5;

		.navcont {
    
			width: 25%;
			color: #B0B0B0;
			text-align: center;
		}
	}

	.navchosbox {
    
		color: #F56C6C!important;
	}
	.navchosboxb{
    
		color: #0059FF!important;
	}
	.flexcenter{
    
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

If there is missing Or there is improve It can be pointed out that