首页
关于
Search
1
宝塔面板安装go-fly利用supervisor实现GO语言进程守护
4,454 阅读
2
Linux部署zerotier组建虚拟局域网
3,731 阅读
3
Uni app 页面&组件生命周期
3,614 阅读
4
dotnet tool 自动找到项目里面重复的 NuGet 依赖项
2,810 阅读
5
Win 2012 R2 服务器安装SQL Server 前置条件
2,753 阅读
技术
C# .Net
App
UI 前端
服务器运维
软件
3D打印
组装
模型
登录
Search
标签搜索
Linux
zerotier
暂时
教程
整理
未
console
log
组件
页面
渲染
zzmzaizai
累计撰写
7
篇文章
累计收到
0
条评论
首页
栏目
技术
C# .Net
App
UI 前端
服务器运维
软件
3D打印
组装
模型
页面
关于
搜索到
1
篇与
log
的结果
2022-02-22
Uni app 页面&组件生命周期
不论是app还是小程序,生命周期是非常重要的知识点。页面的生命周期uni-app 支持如下生命周期函数:onLoad 监听页面加载,其参数为上个页面传递的数据,参数类型为object(用于页面传参)onShow 监听页面显示onReady 监听页面初次渲染完成onHide 监听页面隐藏onUnload 监听页面卸载onPullDownRefresh 监听用户下拉动作onReachBottom 页面上拉触底事件的处理函数onShareAppMessage 用户点击右上角分享 微信小程序onPageScroll 监听页面滚动onTabItemTap 当前是 tab 页时,点击 tab 时触发。例子: export default { data() { return { title: 'Hello' } }, onLoad() { console.log('页面加载') }, onShow() { console.log('页面显示') }, onReady(){ console.log('页面初次显示') }, onHide() { console.log('页面隐藏') }, onUnload() { console.log('页面卸载') }, onBackPress(){ console.log('页面返回...') }, onShareAppMessage() { console.log('分享!') }, onReachBottom() { console.log('下拉加载...') }, onPageScroll(){ console.log('页面滚动...') }, onPullDownRefresh() { console.log('上拉刷新...') uni.stopPullDownRefresh(); }, // #ifdef APP-PLUS onNavigationBarButtonTap(){ }, // #endif methods: { tap(){ console.log('tap点击!'); } } } 组件的生命周期beforeCreate 组件初始化,但数据原生观测、自定义观测(eventwatcher)没生成之前。未完全创建阶段created 组件创建后,但还未挂载完全创建阶段beforeMount 组件渲染后,挂载前。渲染后待挂载mounted 组件挂载到页面 可用 vm.$el 访问挂载OKbeforeUpdate 虚拟 DOM 重新渲染和打补丁之前再次渲染前updated 组件 DOM 已经更新再次渲染后activated keep-alive 组件激活时调用。当前组件被激活:显示deactivated keep-alive 组件停用时调用。当前组件隐藏beforeDestroy 实例销毁之前调用。实例仍然完全可用。销毁前destroy Vue 实例销毁后调用补充:挂载阶段,先渲染组件,然后挂载组件。例子: export default { data() { return { title: 'Hello' } }, props:{}, beforeCreate() { console.log('组件初始化,未完全创建阶段') }, created() { console.log('组件创建后,但还未挂载') }, beforeMount(){ console.log('渲染后待挂载') }, mounted() { console.log('组件挂载到页面OK,可用 vm.$el 访问') }, beforeUpdate() { console.log('再次渲染前') }, updated(){ console.log('再次渲染后') }, activated() { console.log('当前组件被激活:显示') }, deactivated() { console.log('当前组件隐藏') }, beforeDestroy(){ console.log('销毁前') }, destroy() { console.log('销毁后') }, methods: { tap(){ console.log('tap点击!'); } } }
2022年02月22日
3,614 阅读
0 评论
0 点赞