【小程序】回到顶部

回到顶部

1. scroll-view形式下回到顶部

//wxml
<scroll-view scroll-y scroll-top='{{topNum}}' bindscroll="scrolltoupper">
</scroll-view>
<view class="gotop" hidden='{{!cangotop}}' catchtap="goTop">
  <view>回到顶部</view>
</view>

// wxss
.toTop {
  width: 80rpx;
  height: 80rpx;
  border: 1px solid rgb(197, 197, 197);
  position: fixed;
  top: 84%;
  right: 2%;
  text-align: center;
  line-height: 80rpx;
  background: #fff;
  border-radius: 50%;
}
.my-text{
  font-size: 50rpx;
}

// js
 data:{
    topNum: 0
  }
 
  // 获取滚动条当前位置
  scrolltoupper:function(e){
    console.log(e)
    if (e.detail.scrollTop > 100 && !this.data.cangotop) {
      //避免重复设置setData
      this.setData({
        cangotop: true
      });
    } 
    if(e.detail.scrollTop <= 100 && this.data.cangotop){
       this.setData({
	   cangotop: false
       });
    }
  },
  //回到顶部
  goTop: function (e) {  // 一键回到顶部
    this.setData({
      topNum:0
    });
  },

来源：oschina

链接：https://my.oschina.net/u/4461771/blog/4521824