微信小程序怎么实现一键回到顶部功能

这篇“微信小程序怎么实现一键回到顶部功能”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“微信小程序怎么实现一键回到顶部功能”文章吧。

做微信小程序的时候遇到了这个问题要求列表页要做一个实现上拉一定距离后显示一键返回顶部的点击可以一下子回到列表顶部。

遇到问题不要慌

面向百度编程 ----上代码

.wxml文件代码

<!-- 返回顶部  -->
            <view class='goTop' hidden='{{!scrollTop}}' bindtap="goTop">
            返回顶部  //这里可以换成一个图标
            </view>

.wxss文件代码

.goTop{
    height: 80rpx;
    width: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 200rpx;
    background: rgba(0,0,0,.3);
    right: 80rpx; 
    border-radius: 50%;
    z-index: 9;
    }

.js文件代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
    scrollTop: false,
  },
  //回到顶部

goTop: function (e) {
  // 一键回到顶部
  if (wx.pageScrollTo) {
  
  wx.pageScrollTo({ scrollTop: 0 })
  
  } else {
  
  wx.showModal({
  
  title: '提示', content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
  
  })
  } 
},
  // 获取滚动条当前位置
  onPageScroll: function (e) {
  
    if (e.scrollTop > 200) {
    
      this.setData({
        scrollTop: true
      });
      
    } else {
    
      this.setData({
        scrollTop: false
      });
      
    }
  }
})

以上就是关于“微信小程序怎么实现一键回到顶部功能”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。