美文网首页
微信小程序 滚动

微信小程序 滚动

作者: 深度_1175 | 来源:发表于2018-08-06 11:31 被阅读0次

    获取节点信息(此方法为备用)

    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>
    

    相关文章

      网友评论

          本文标题:微信小程序 滚动

          本文链接:https://www.haomeiwen.com/subject/okmwvftx.html