wx.createSelectorQuery获取元素的top有问题
wx.createSelectorQuery().select(id).fields({
dataset: true,
size: true,
rect:true,
scrollOffset: true,
properties: ['scrollX', 'scrollY']
}, function(res){
// res.dataset // 节点的dataset
// res.width // 节点的宽度
// res.height // 节点的高度
// res.scrollLeft // 节点的水平滚动位置
// res.scrollTop // 节点的竖直滚动位置
// res.scrollX // 节点 scroll-x 属性的当前值
// res.scrollY // 节点 scroll-x 属性的当前值
reslove(res);
}).exec()
这里省略了promise代码.
一直搞不懂这个top值,后来看了文档解释说 是相对于显示区域，以像素为单位,
在目前测试的时候发现了一些问题, 每次取的值都不一样. 比如 我绑定 focus和bulr事件 当元素多的超出一个手机的高度获取就有问题了.
比如 同一个elem 在滚动条为0的情况下 获取的是 30px, 滚动条滚动到屏幕(整个元素) 最下方 获取的是 top:-1679s.
当然 根据官方的解释说 相对于显示区域,这些都没毛病,但是当某些情况, 比如我要做表单验证 而且字段数量比较多的时候, 绑定了 bulr和focus 和日期的选择 单选,多选的情况下 某些时候 你滚动条在同一个时刻 获取的top都是不一样的 focus获取的是一个top, bulr获取的是一个top. 就没办法给我们提供个scrollTop的东西么. 相对于整个page而言的, 有试过曲线救国 使用 scroll-view组件, 但是textarea有很大的问题 就放弃了. 官方不打算进行修复或者说给我增加一个相对于page的一个定位么?
5 回复
//console.log('firstFiled',firstFiled);
Promise.all([this.getFields(`#f-${firstFiled.formIndex}-${firstFiled.filed.key}`),this.getScrollOffset()]).then((res)=>{
let fieldRes=res[0];
let pageRes=res[1];
// console.log('错误字段res',res,firstFiled,`#f-${firstFiled.formIndex}-${firstFiled.filed.key}`);
wx.pageScrollTo({scrollTop:fieldRes.top+pageRes.scrollTop});})
getScrollOffset: function(){
return new Promise((reslove,reject)=>{
wx.createSelectorQuery().selectViewport().scrollOffset(function(res){
reslove(res);
}).exec()
})
},
解决
强力驱动