前言

this.$nextTick函数

this.$nextTick函数
nextTick函数是vue提供的,其作用为:

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

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

可能的写法

<script>
export default {
    data() {
        return {
        }
    },
    onLoad() {
    	this.loadData();
    },
    methods: {
        loadData: function(e) {
        	uni.request({
        		url: ...,
        		data: ...,
	        	success: (res) => {
	        		...
	        		/*拿到服务器返回的数据后,我想根据数据修改某个元素的高度*/
	        		this.$nextTick(function() {
	                	/*下次 DOM 更新时,找到某个控件,再进行复杂计算并确定其高度后*/
	            	});
	        	},
	        	fail: (res) => {
					...
				}
        	});            
        },
    }
}

</script>


参考

uniapp 页面渲染完成

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐