小程序返回顶部top滚动

最新推荐文章于 2020-12-23 14:15:47 发布

绮罗郁金香

最新推荐文章于 2020-12-23 14:15:47 发布

阅读量202

点赞数 1

分类专栏：小程序文章标签：小程序 top 置顶小程序置顶

本文链接：https://blog.csdn.net/weixin_39618723/article/details/100152915

版权

小程序专栏收录该内容

0 篇文章 0 订阅

订阅专栏

demo.js

var c = getApp();
Page({
   data:{
        // top标签显示（默认不显示）
        backTop:0 
  }, 
  // 监听滚动条坐标
  onPageScroll: function (e) {

    var that = this;
    var scrollTop = e.scrollTop;
    //当监听滚动到500时，显示置顶按钮
    var backTopValue = scrollTop > 500 ? 1 : 0;
    that.setData({
      backTop: backTopValue
    })
  },
  
  // 滚动到顶部
  backTop:function(){
    // 回到顶部
      wx.pageScrollTo({
        scrollTop: 0
      })
  }

})

demo.wxml

<button bindtap="backTop" class="backTop" wx:if="{{backTop==1}}">
  <image mode="aspectFit" src="https://test1858.qcyx1858.com/attachment/images/xcx/images/share-white.png"></image>
  <view>置顶</view>
</button>

demo.wxss


.zhid{
    display: inline-block;
    bottom: 31%;
    right: 30rpx;
    width: 80rpx;
    height: 80rpx;
    position: fixed;
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
    font-size: 20rpx;
    padding: 10rpx;
    line-height: 1.2;
    z-index: 100;

}
.zhid image{
   width: 50%;
    height: 50%;
}