收藏
回答

wx.createSelectorQuery获取元素的top有问题

问题模块
API和组件
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的一个定位么?


最后一次编辑于  2017-10-30  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

5 个回答

  • soul
    soul
    2017-10-30

    这个问题结合wx.pageScrollTo会出现很魔性的一面,各种滚动出问题.定位不准确.

    2017-10-30
    赞同 2
    回复
  • soul
    soul
    2018-03-28
    //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()
    })

    },


    解决

    2018-03-28
    赞同 1
    回复
  • yitong🐷
    yitong🐷
    2018-02-02

    怎么解决的,这个top的值我看了一下午也计算不来到底怎么算的...

    2018-02-02
    赞同
    回复
  • soul
    soul
    2017-10-31

    看来没人回复 准备换其他方式了

    2017-10-31
    赞同
    回复
  • soul
    soul
    2017-10-30

    有考虑过this.setData渲染问题. 试过利用setTimeout,1000来做延迟动画 还是一样.

    2017-10-30
    赞同
    回复