前言

Hbuilder X 2.7.14.20200618 （不清楚uniapp的版本，用工具版本代替）

onReady函数

onReady是 uni-app 页面生命周期函数之一，其作用为：

监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发

重点：页面初次渲染完成。

this.$nextTick函数

nextTick函数是vue提供的，其作用为：

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

重点1：修改数据之后立即使用。
重点2：下次DOM 更新后回调。

示例：返回顶部

当重复设置某些属性为相同的值时，不会同步到view层。所以，每次将scroll-view组件的scroll-top属性值设置为0，只有第一次能顺利返回顶部。因此，返回顶部功能要这样实现：先返回到上一页（this.scrollTop = this.old.scrollTop），然后再返回顶部（this.$nextTick(function() { this.scrollTop = 0 });）。

<scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="scroll">
<view @tap="goTop" class="uni-link uni-center uni-common-mt">点击这里返回顶部
</view>

export default {data() {return {scrollTop: 0,old: {scrollTop: 0}}},methods: {scroll: function(e) {this.old.scrollTop = e.detail.scrollTop},goTop: function(e) {this.scrollTop = this.old.scrollTopthis.$nextTick(function() {this.scrollTop = 0});}}
}

uni-app 为啥可以用vue的函数

uni-app 是一个使用 Vue.js 开发所有前端应用的框架
uni-app基于Vue 2.0实现

参考

https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f
https://uniapp.dcloud.io/use?id=%e5%b8%b8%e8%a7%81%e9%97%ae%e9%a2%98

uniapp 页面渲染完成相关推荐

uniapp 页面下次渲染完成后执行：this.$nextTick
前言略 this.$nextTick函数 this.$nextTick函数 nextTick函数是vue提供的,其作用为: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方 ...
uni-app返回上一层页面后数据刷新重置解决办法，uni-app页面不刷新，强制刷新页面方法！
页面跳转后返回之前页面数据全部重置刷新了大概意思就是从a页面去b页面办了点事,在回到a页面时之前填写的数据没了,页面数据重置了怎么办,这个应该只有新手会犯这个错误,可以看看官方文档:uni-app页 ...
uni-app 页面生命周期
uni-app 页面生命周期页面生命周期 uni-app 支持如下页面生命周期函数: onLoad 监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参) onShow 监 ...
渲染html失败,【报Bug】页面渲染失败，偶发性十次有一次
详细问题描述调试模式下没复现,所以看不到报错,友盟统计也没记录下报错. 偶发性,页面渲染失败.虽然页面渲染失败,但是接口有正常调,返回数据正常,通过后台接口确认过了.频率大概十次之中有一次.每次初始 ...
原生webview内核对于H5页面渲染兼容性
背景首先,小生从事于H5游戏开发,目前工作内容主要是开发指定的H5游戏嵌入到app包里面(比如:直播间里的小游戏).不可避免需要与原生开发进行频繁的人际交互和代码交互,特别是对于一些安卓低端机的适配 ...
vue的生命周期、uni-app页面生命周期
vue的生命周期 4大阶段8个钩子生命周期在该生命周期发生了什么 beforeCreate 实例刚被创建出来,data,methods还没有初始化 created 实例创建完成,data和meth ...
微信小程序之ajax服务器交互及页面渲染
这篇是特意分开写的.网上找的帖子大多是直接在onload中请求数据.而我想实现的是点击按钮,然后请求服务器,接着返回数据,前端页面渲染.所以搞了挺久的,在此记录一下. 请求是按照微信官方给出的,wx. ...
list vue 删除后页面渲染_浅谈Vue项目实战（页面渲染+事件绑定）
页面渲染 vue是不会去操作dom节点,是有数据去操控节点,在js文件数据都在data里 *js代码片* export default { data() { return { formInline: ...
前端开发这么多年，你真的了解浏览器页面渲染机制吗？
作者 | 浪里行舟前言浏览器的内核是指支持浏览器运行的最核心的程序,分为两个部分的,一是渲染引擎,另一个是JS引擎.渲染引擎在不同的浏览器中也不是都相同的.目前市面上常见的浏览器内核可以分为这四种 ...

uniapp 页面渲染完成

前言

onReady函数

this.$nextTick函数

示例：返回顶部

uni-app 为啥可以用vue的函数

参考

uniapp 页面渲染完成相关推荐

最新文章

热门文章