解决微信小程序跳转10层限制的问题

微信小程序为了解决性能问题,使用navigateTo()方法跳转,其页面限制为10层。
因为每次使用navigateTo()方法跳转页面都会将跳转的页面添加到页面栈中,页面栈越多,性能越差。
每次使用navigateBack()方法返回时,就会减少一层页面栈。
该问题的解决方案:
使用getCurrentPages()方法获取栈中的页面数,如果大于等于10层,则使用redirectTo()方法进行跳转
getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。

代码示例如下:

<template>
	<div>
		<div>相关新闻</div>
		<div>
			<div class="news-list" @click="pushPage('/pages/news/index?id=3')">例子</div>
		</div>
	</div>
</template>
<script>
	export default{
		name:"news",
		data(){
			return {
				title:""
			}
		},
		onLoad(opts){
			let pages = getCurrentPages();
			// 获取页面栈总页数
			this.pagesCount = pages.length;
		},
		methods:{
			pushPage(url){
				// 如果页面栈总数大于10
				if(this.pagesCount >= 10){
					// 使用重定向跳转页面
					uni.redirectTo({
						url: url
					})
				}else{
					// 如果页面栈总数小于10,则打开新页面
					uni.navigateTo({
						url: url
					})
				}
			}
		}
	}
</script>
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐