uniapp onLoad 注意事项

onLoad()页面加载执行,因为函数是从上到下执行的,所以调用方法和获取页面传递过来的值时,顺序要注意一下

<script>
	export default {
		data() {
			return {
				id:0,
				detail:{}
			}
		},
		methods: {
		async getNewsDetail(){
			console.log('yyyy'+this.id);
			const res = await this.$myRuquest({
					url:'/api/getnew/'+this.id,
					
				})
				console.log(res)
			this.detail = res.data.message[0]
			}
		},
		onLoad(options){
			
			this.getNewsDetail()
			this.id = options.id
		    // console.log(options.id);
		}
	}
</script>

如上图,代码没错,但是先调用的函数,所以当函数执行时id的值还是0,并没有将id赋值成功,所以参数是空

正确写法

<script>
	export default {
		data() {
			return {
				id:0,
				detail:{}
			}
		},
		methods: {
		async getNewsDetail(){
			console.log('yyyy'+this.id);
			const res = await this.$myRuquest({
					url:'/api/getnew/'+this.id,
					
				})
				console.log(res)
			this.detail = res.data.message[0]
			}
		},
		onLoad(options){
			this.id = options.id
			this.getNewsDetail()
		
		    // console.log(options.id);
		}
	}
</script>
  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
uniapp中,onLoad()是页面加载时执行的函数。根据引用\[1\]中的代码,onLoad()函数在页面加载时被调用,它首先调用getNewsDetail()方法来获取新闻详情。在这个例子中,onLoad()函数还获取了页面传递过来的id值,并将其赋给了data中的id属性。所以,onLoad()函数在页面加载时执行,并且可以用来执行一些初始化的操作,比如获取用户信息或其他必要的数据。\[1\]\[3\] 另外,根据引用\[2\]中的描述,App.vue是在第一次进入系统时执行的,如果从系统自己的页面返回到自己的页面,不会重新进入App.vue。而在进入系统时,第一次进入page.vue会触发onLoad()函数。这可能会导致一个问题,即在返回时,page.vue中的onLoad()函数被触发,但不会进入App.vue,这样await this.$onLaunched()就会一直等待。所以需要注意这个问题,确保在返回时不会出现无限等待的情况。\[2\] #### 引用[.reference_title] - *1* [uniapp onLoad 注意事项](https://blog.csdn.net/weixin_43457011/article/details/111152400)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [uniapp onLaunch和onLoad执行顺序,页面返回会出现问题,一直加载中](https://blog.csdn.net/qq_42440919/article/details/129793553)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值