微信小程序 滚动

获取节点信息（此方法为备用）

var that = this;
     
      //声明节点查询的方法
      var query = wx.createSelectorQuery()//创建节点查询器 query
      query.select('#hddb').boundingClientRect()//这段代码的意思是选择Id=the-id的节点，获取节点位置信息的查询请求
      query.selectViewport().scrollOffset()//这段代码的意思是获取页面滑动位置的查询请求
      query.exec(function (res) {
        res[0].top       // #the-id节点的上边界坐标
        res[1].scrollTop // 显示区域的竖直滚动位置
        console.log(res)
        that.setData({ "scrollTop": res[1].scrollTop })
      })

获取设备信息

  var that = this;
      wx.getSystemInfo({
        success: function (res) {
          console.log(res.windowHeight)
          that.setData({ "windowHeight": res.windowHeight })
        }
      })

监听滚动信息

onPageScroll: function(t) {
      this.setData({ "iScrollTop": t.scrollTop});
}

条件渲染

<button wx:if="{{iScrollTop > windowHeight - 300 }}"  bindtap="hddb"  class="hddb" id='hddb'>
    <image src="../../img/zd.png"></image>
</button>