小程序点击返回顶部

工作日志 随手笔记 进攻

 <scroll-view bindscroll='scrollTop' style="height:{{clientHeight}}px;" scroll-y="true" scroll-top='{{scroll}}'>
   
    

 <view class='top' bindtap='gotop' wx:if="{{hiddentop}}"> 
    <text class='iconfont icon-arrowup'></text>
  </view>

</scroll-view>

 内容我没有写 我只是把图标放进去了 

通过这个属性 判断是否滚动 通过滚动距离来判断什么时候隐藏和显示

data：{
    scroll:0,
    hiddentop:false,
}

  // 点击返回顶部
  gotop:function(e){
    this.setData({
      scroll:0
    })
  },
  scrollTop:function(e){
    console.log(e.detail.scrollTop) //如果没有输出结果可能是你scroll-view 嵌套的不对 

    var hiddentop = this.data.hiddentop;
    if (e.detail.scrollTop > 10){ //如果距离顶部10 显示返回顶部标签
      this.setData({
        hiddentop:true
      })
   }else{
     this.setData({
       hiddentop: false
     })
   }
  },