小程序返回顶部滚动

最新推荐文章于 2024-05-18 14:53:16 发布

黑漆#000000

最新推荐文章于 2024-05-18 14:53:16 发布

阅读量387

点赞数

wxml:

<!-- 回到顶部 -->
<view class="ago-top" style="display:{{top_display}}" bindtap="clickAgoTop">
  <image class='ago-top-image' src="../../images/top.jpg" />
</view>

wxss:

.ago-top{
  text-align: center;
  position: fixed;
  bottom: 70rpx;
  right: 130rpx;
}
.ago-top-image{
  width: 70rpx;
  height: 100rpx;
  border-radius: 45rpx;
}

js:

data: { 
  top_display: 'none',
},
// 滚动条监听 显示隐藏回顶部图标
onPageScroll: function (e) {
  if (e.scrollTop > 1000) {
    this.setData({ 
      top_display: 'black',
    });
  } else {
    this.setData({ 
      top_display: 'none',
    });
  }
},
// 点击回顶部
clickAgoTop:function(e){
  wx.pageScrollTo({
    scrollTop: 0
  })
},