uniapp中onload的使用
时间: 2024-11-23 10:16:36 浏览: 0
uniapp微信小程序使用echarts
在UniApp中,`onload`是一个生命周期钩子,用于监听组件或页面的加载完成事件。当你希望在页面或组件完全加载并渲染完成后执行一些初始化操作时,可以使用这个钩子。`onLoad`通常用于处理如下场景:
1. **数据获取**:从服务器拉取数据并在数据加载完成后填充到页面中,防止用户看到空的内容或等待时间过长。
2. **资源加载**:比如图片、音频文件等,在确保它们加载完成后进行进一步的操作,如预览或设置src属性。
3. **UI布局调整**:某些复杂的UI结构可能需要在所有内容加载完后才能准确布局。
```javascript
Page({
onLoad: function (options) {
// 获取数据
this.setData({
data: getDataFromServer()
});
// 图片懒加载
const images = document.querySelectorAll('.lazy-img');
for (let i = 0; i < images.length; i++) {
images[i].addEventListener('load', () => {
images[i].classList.add('loaded');
});
}
},
})
```
在这个例子中,`onLoad`函数会在页面首次进入或刷新时执行。`options`参数包含了来自上级页面传递给当前页面的参数。
阅读全文