前言

• 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 页面渲染完成的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。