小程序填坑日记之获取view高度

这两天UI提了一种交互效果,希望页面滚动到某个位置的时候让一个按钮fix住,而这个位置时不定高度的,这个位置会根据当前页面的内容多少而动态改变(简而言之就是 height:auto)
废话不多说,直接撸代码

  • 在Page的onReady回调里获取特定元素的高度
    这里用到了小程序api-wx.createSelectorQuery(),指定ID元素的详细属性会在rect的回调里返回
onReady () {
    setTimeout(() => {
      const _this = this
      wx.createSelectorQuery().select('#YOUR_ELEMEMT_ID')
        .boundingClientRect(function (rect) {
            console.log(rect)
            _this.setData({
              top: rect.top
           })
      }).exec()
    }, 300)
}
  • 有人可能会问上面代码的定时器是干嘛的,不是已经在页面渲染完成OnReady回调里了吗?
  • 事实上,这里可能是小程序的bug,如果不加定时器,获取的元素高度还是没渲染完异步数据前的高度
  • 当获取到高度后就可以实现滚动到某个位置进行fixed的操作了
onPageScroll (e) {
    if (this.data.top <= e.scrollTop) {
      this.setData({
        fixed: true
      })
    } else {
      this.setData({
        fixed: false
      })
    }
  }
  <!-- 这里是粗略的页面和样式-->
  <view class="{{fixed?'fixed':''}}" id="YOUR_ELEMENT_ID">
     在这里固定住
  </view>

 .fixed{
   position:fixed;
 }
  • 写在最后的话:
    1. 如果有更好的解决方案请在下方留言
    2. 转载请注明出处

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 167,422评论 24 706
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,239评论 1 92
  • 准备原材料:中排骨1斤,生抽,老抽,醋,糖,料酒 做法:把洗净的排骨倒在锅里,放一勺生抽,一勺老抽,一勺料酒,三勺...
    赵霞1阅读 189评论 0 1
  • 地球上的人族,你们好,我好像是第七平行宇宙某个星域的魔法师,我在试验一次超远距空间魔法时出了一点小状况,来到了你们...
    偷心魔法师阅读 235评论 2 3
  • 离开校园走上了稳定的教师岗位,圈子相对而言很固定,三五年下来疏于思考,按部就班,终日为学生作业各种会议,班上琐事所...
    Valerie静水流深阅读 519评论 6 3