小程序长页面返回顶部

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

原创最新推荐文章于 2024-05-18 14:53:16 发布 · 863 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

小程序专栏收录该内容

8 篇文章

订阅专栏

html:

<view class="content">内容</view>
<view class="backTop" bindtap='backTop' wx:if="{{backTopValue ==true}}">totop</view>

css:

/*浮窗返回顶部*/
.content {
  width: 300rpx;
  height: 5000rpx;
  border: 1px solid red;
}

.backTop {
  position: fixed;
  right: 20rpx;
  bottom: 130rpx;
}

js:

 data: {
    // top标签显示（默认不显示）
    backTopValue: false
  },
  // 监听滚动条坐标
  onPageScroll: function(e) {
    //console.log(e)
    var that = this
    var scrollTop = e.scrollTop
    var backTopValue = scrollTop > 500 ? true : false
    that.setData({
      backTopValue: backTopValue
    })
  },

  // 滚动到顶部
  backTop: function() {
    // 控制滚动
    wx.pageScrollTo({
      scrollTop: 0
    })
  },