回到顶部功能：uniapp微信小程序回到顶部的几种方法

1、第一种最简单：

使用scroll-top回到顶部

     <!--    回到顶部--><view class="back-top-box"><u-back-top :scroll-top="scrollTop"></u-back-top></view>

data：

scrollTop: 0 //回到顶部

     onPageScroll(e) {this.scrollTop = e.scrollTop;},

注意位置！不是写在methods方法里！而是和onshow和onLoad等并列

2、第二种方法：

设置目标节点

在需要的时候。调用这个方法即可。这个方法需要设置目标节点的标签名

      /*** 回到顶部*/backTop(){// 回到顶部uni.createSelectorQuery().select(".item-list").boundingClientRect(data => { //目标节点uni.createSelectorQuery().select(".record-page").boundingClientRect((res) => { //最外层盒子节点uni.pageScrollTo({duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错scrollTop: res.top - data.top, //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离})}).exec()}).exec();},

回到顶部功能：uniapp微信小程序回到顶部的几种方法相关推荐

微信小程序开发流程的两种方法科普
现在微信小程序早已渗透我们日常生活的方方面面,很多商家看到了小程序带来的巨大流量,也想开发一个自己的小程序.所以今天就跟大家科普下微信小程序开发流程,你会发现这个开发过程其实非常简单. 1. 在微信公 ...
小程序发布上线流程_微信小程序开发流程的两种方法科普
现在微信小程序早已渗透到我们日常生活的方方面面,很多商家看到了小程序带来的巨大流量,也想开发一个自己的小程序.所以今天就跟大家科普下微信小程序开发流程,你会发现这个开发过程其实非常简单. 1. 在微信 ...
微信小程序---页面刷新的几种方法
话不多说,首先附上两个链接,表示感谢: 微信小程序如何刷新当前界面微信小程序----返回上一页刷新或当前页刷新要解决的问题:如下图所示,当点击立即借书成功之后,把请求回来的数据中的借书单数量显示到 ...
抓取微信小程序数据包的三种方法
前言做安全测试的都会遇到测试某微信小程序,而微信小程序基本都是基于HTTPS的,所以抓取HTTPS数据包就是最关键的一步.最近几天折腾了一下,整理了比较简单.方便的三种方法. 条件抓取微信小程序数 ...
微信小程序页面跳转(三种方法)
方法1 对标签绑定点击事件 <view bindtap="clickMe" data-nid="123" data-name="SD" ...
解决微信小程序图片延迟加载（四种方法）
实现延迟加载的方法 1:通过监听滚动条滑动事件,判断元素距离页面顶部的距离是否小于等于页面的可视高度 Page({data: {realScrollTop: 0,//页面滚动距离driveHeight ...
外部web端访问微信小程序云数据库的几种方法
前言我当前的项目是小程序开发,使用的是云开发方式,那么这时涉及到了小程序端提交的数据会保存到云数据库中,可是呢这些个数据要被外部访问用来管理,也就是还得弄一个管理后台界面管理这些数据.那就需要拿到云 ...
微信小程序使用函数的三种方法
--使用来自不同页面的函数函数写在util.js页面 function formatTime(date) {var year = date.getFullYear()var month = date ...
uni-app微信小程序封装全局判断是否登录方法结合全局变量
新建的uni-app项目会有个app.vue文件,在此文件下 onLaunch应用生命周期封装一个方法(把全局变量定义一下): 注意:onLaunch应用生命周期只会触发一次 app.vue: < ...
微信小程序调用时间的三种方法
1.更改后端时间戳 //wxml<wxs module="Formater" src="../../../utils/Datetime.wxs">& ...

回到顶部功能：uniapp微信小程序回到顶部的几种方法

1、第一种最简单：

2、第二种方法：

回到顶部功能：uniapp微信小程序回到顶部的几种方法相关推荐

最新文章

热门文章