微信小程序小功能 - 返回顶部

最新推荐文章于 2024-11-14 13:45:47 发布

陈小浩同学

最新推荐文章于 2024-11-14 13:45:47 发布

阅读量189

点赞数

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/xiaodouxuan11/article/details/104384972

版权

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

1 篇文章 0 订阅

订阅专栏

温馨提示：直接复制粘贴即可使用，除非你那不是微信小程序
wxml

<scroll-view scroll-y="{{true}}" scroll-with-animation="{{ true }}" scroll-top="{{ scrollToTop }}" bindscroll="top" style="height:{{ height }}px">
<!-- 主体内容 -->
这是内容区

<!-- 回到顶部 -->
<view class="top {{scrollTop}}" bindtap="scrollToTop">TOP</view>
</scroll-view>

wxss

/* 回到顶部 */
.top{width:80rpx;height:80rpx;line-height:80rpx;font-size:22rpx;text-align:center;color:white;background:rgba(0, 0, 0, .5);position:fixed;right:30rpx;bottom:80rpx;border-radius: 50%;opacity: 0;transition: all 1s}
.topShow{opacity:1;transition: all 1s;}

Page({
//scroll-view 初始高度
  height:0,
  scrollTop:'',
  scrollToTop:0,
//响应事件
top(e){
    var scrollTop = e.detail.scrollTop;
    //如果scrollTop大于等于150高度时追加一个topShow样式
    if (scrollTop >= 150){
      this.setData({
        scrollTop:'topShow'
      })
    }else{
    //小于就取消topShow样式
      this.setData({
        scrollTop: ''
      })
    }
  },
  //返回顶部点击事件
  scrollToTop(){
    this.setData({
      scrollToTop: 0
    })
  }
})