uni.createSelectorQuery渲染后执行

快来打我* 2023-06-27 06:11 0阅读 0赞

每次使用createSelectorQuery时，因为和数据赋值一起调用，所以导致只能获取到上一次渲染的数据，

如果能让这个函数 在渲染之后调用，就可以完美解决了

暂时不知道怎么监听页面是否渲染。

所以只能使用 setTimeout临时代替一下

scrollToBottom: function () {
    					let query = uni.createSelectorQuery();
    					query.in(this).selectAll('.main-item').boundingClientRect();
    					query.in(this).select('#scrollview').boundingClientRect();
    					query.exec((res) => {
    							let mitemHeight = 0;
    							console.log("元素",res);
    							res[0].forEach((rect) => mitemHeight = mitemHeight + rect.height + 40)  
    							if (mitemHeight > that.solHeight) {  
    									that.scrollTop = (mitemHeight + 100)
    							}
    	　　　　})
    			}

注意一下

[官方文档][Link 1]

*  使用 `uni.createSelectorQuery()` 需要在生命周期 `mounted` 后进行调用。
 *  自定义组件编译模式（默认模式），需要使用到 `selectorQuery.in` 方法。

调用时 使用

setTimeout(() => {
    				       that.scrollToBottom();
    				}, 100)

就可以暂时解决这个问题

找到了更优解

that.$nextTick(function(){
    					  that.scrollToBottom();
    				})

[Link 1]: https://uniapp.dcloud.io/api/ui/nodes-info?id=createselectorquery

发表评论取消回复

表情：

评论列表（有 0 条评论，0人围观）

还没有评论，来说两句吧...

相关阅读

相关 Spring启动后执行

*方法一:** 实现BeanPostProcessor接口: public class InstantiationTracingBeanPostProc...

骑猪看日落/ 2024年04月18日 21:12/ 0 赞/ 57 阅读

相关 uni.createSelectorQuery渲染后执行

每次使用createSelectorQuery时，因为和数据赋值一起调用，所以导致只能获取到上一次渲染的数据，如果能让这个函数在渲染之后调用，就可以完美解决了暂时不知

快来打我*/ 2023年06月27日 06:11/ 0 赞/ 1 阅读

相关什么是前端渲染和后端渲染，前端路由和后端路由。

[—文章首发—][Link 1] 什么是前端渲染和后端渲染，前端路由和后端路由。 [视频讲解][Link 2] 后端渲染：服务器直接生产渲

Myth丶恋晨/ 2023年03月03日 11:07/ 0 赞/ 24 阅读

相关关于预渲染 -- 可以获取到调用接口后渲染的页面

预渲染（prerender-spa-plugin），简而言之就是配置路由文件的参数，webpack打包生成html。好处是首屏优化和SEO。本文是为了验证预渲染是否能够获取到调

男娘i/ 2023年01月09日 12:54/ 0 赞/ 153 阅读

相关 java是解释执行还是先编译后执行？

引言如下图所示，执行java -version命令可以查看jdk版本，如下图。 ![图片][6bf759dff9b2d3249b1d04d5aa5af86

爱被打了一巴掌/ 2022年12月28日 07:15/ 0 赞/ 297 阅读

相关数据更新后，页面不重新渲染

在vue中更改数组和对对象但是页面不重新渲染在这个确实已经更改数据成功了但是vue没有重新渲染页面，好像没监听到数据改变一样这时候最粗鲁的做法是在更改数据之

Love The Way You Lie/ 2022年11月29日 03:02/ 0 赞/ 215 阅读

相关 layui结合后端语言实现菜单渲染

注意：接口渲染的时候一定要防止动态化的问题 layui.use(['element'],function(){ var element = layu

古城微笑少年丶/ 2022年11月04日 15:24/ 0 赞/ 173 阅读

相关 SpringBoot 程序启动后执行

示例： package com.zyq.config; import org.springframework.boot.ApplicationArg

小咪咪/ 2022年10月06日 00:35/ 0 赞/ 260 阅读

相关 vue渲染后触发事件

定义vue var collegeContent = new Vue({ el: "collegeContent",

太过爱你忘了你带给我的痛/ 2022年05月26日 00:26/ 0 赞/ 402 阅读

相关 Spring启动后执行

方法一: 实现BeanPostProcessor接口: public class InstantiationTracingBeanPostProcessor

傷城~/ 2022年04月05日 15:37/ 0 赞/ 265 阅读