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

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

遇到问题不要慌

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

.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
? ? ? });
? ? ??
? ? }
? }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于微信小程序实现一键回到顶部功能的详细内容...