页面回到顶部

最新推荐文章于 2023-11-12 19:12:34 发布

zlq_csdn

最新推荐文章于 2023-11-12 19:12:34 发布

阅读量747

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.csdn.net/zlq_CSDN/article/details/88581469

微信小程序专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了在小程序中实现返回顶部按钮的具体步骤，包括.wxml布局、wxss样式设置及页面滚动事件监听与按钮点击事件处理，确保用户在浏览长页面时能便捷返回顶部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

多话不说，直接上代码，简单易懂

1.首先 .wxml 代码

<!-- 回到顶部 -->
<view class='goTop' hidden='{{showTop}}' bindtap='goTop'>
  <image src='../../resources/images/goTop.png'></image>    <!-- 图片按钮为图片+背景 -->
</view>

2.其次 .wxss 代码

.goTop{       /* 背景样式设置 */
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  position: fixed;
  bottom: 100rpx;
  right: 30rpx;
  background: #000000;
  opacity:0.5;
}
.goTop image{     /* 向上图片样式设置 */
  width: 60rpx;
  height: 60rpx;
  position: relative;
  top: 15rpx;
  left: 15rpx;
}

3.页面滚动时触发的事件

onPageScroll:function(e){
    //console.log(e.scrollTop);   //当前页面的高度
    if (e.scrollTop >= 400){        //当前单位为 px
      this.setData({
        showTop:false
      });
    }
    else{
      this.setData({
        showTop: true
      });
    }
  },

4.回到顶部按钮出现后，点击事件触发

  //点击回到顶部按钮
  goTop:function(){
    wx.pageScrollTo({
      scrollTop: 0,
      duration: 300        //300ms回到顶部
    })
  },