您现在的位置是：网站首页> 编程资料编程资料

微信小程序实现一键回到顶部功能_javascript技巧_

2023-05-24 436人已围观

简介微信小程序实现一键回到顶部功能_javascript技巧_

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

遇到问题不要慌

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

.wxml文件代码

                          返回顶部  //这里可以换成一个图标

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

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

您可能感兴趣的文章:

上一篇：TypeScript保姆级基础教程_js其它_

下一篇：.NET使用YARP根据域名转发实现反向代理_实用技巧_

您现在的位置是：网站首页> 编程资料编程资料

微信小程序实现一键回到顶部功能_javascript技巧_

相关内容

点击排行

本栏推荐

猜你喜欢