【微信小程序】scroll-view 的上拉加载和下拉刷新
1、在微信小程序中,想到 下拉刷新 和 上拉加载,如果是整个页面都拖动的话,可以在页面配置中,配置 enablePullDownRefresh 和 onReachBottomDistance 然后在 .js 中 使用 Page.onPullDownRefresh 和 Page.onReachButton 这样来进行。
2、上面的做法是官方推荐我们做页面的 下拉刷新 和 上拉加载 所使用的方法。但某种情况比如头部是固定的,但使用上面的方法,整个页面都拉动,会显得很奇怪。这个时候,我们的滚动实际上是使用了 scroll-view 来进行的,会显得更加好看。
3、使用 scroll-view 的话,会想到的是 bindscrolltoupper 和 bindscrolltolower,但其实使用这个两个也还是会出现问题的。这个问题是 bindscrolltoupper 会触发多次,而且一开始在顶部的时候,有可能没有响应到。
下面的方法是使用 touchstart 和 touchend 来实现的 上拉加载 和 下拉刷新:
<scroll-view id="scroll-wrap"
scroll-y
bindtouchstart="start_fn"
bindtouchend="end_fn">
// 列表
</scroll-view>
通常我们都写法,都如上面一样,但因为要拿到滚动的最大高度,所以需要写成下面的样式:
<scroll-view id="scroll-wrap"
scroll-top="{{scroll_top}}"
scroll-y>
<view id="inner-wrap"
bindtouchstart="start_fn"
bindtouchend="end_fn">
// 列表
</view>
</scroll-view>
我们需要获取 scroll-wrap 和 inner-wrap 的高度。
Page({
data: {
height: 0, // scroll-wrap 的高度,这个高度是固定的
inner_height: 0, // inner-wrap 的高度,这个高度是动态的
scroll_top: 0, // 滚动到位置。
start_scroll: 0, // 滚动前的位置。
touch_down: 0 // 触摸时候的 Y 的位置
},
// start: onLoad 生命周期
onLoad () {
let self = this;
wx.createSelectorQuery().select('scroll-wrap').boundingClientReact(function (rect) {
self.data.height = rect.height;
}).exec();
}
// end: onLoad 生命周期
});
因为scroll-view 要在垂直方向上可以滚动,需要设置height 的高度,所以通常情况下,只要获取一次就行了,如果scroll-view 因为某个元素消失掉,影响了高度的话,记得要更新 height 的值。
接下来就是 bindtouchstart 和 bindtouchend 的配合:
bindtouchstart ---- start_fn:
// start: 触摸开始
start_fn (e) {
let self = this;
let touch_down = e.touches[0].clientY;
this.data.touch_down = touch_down;
// 获取 inner-wrap 的高度
wx.createSelectorQuery().select('#inner-wrap').boundingClientRect(function (rect) {
self.data.inner_height = rect.height;
}).exec(); // 获取 scroll-wrap 的高度和当前的 scrollTop 位置
wx.createSelectorQuery().select('#scroll-wrap').fields({
scrollOffset: true,
size: true
}, function (rect) {
self.data.start_scroll = rect.scrollTop;
self.data.height = rect.height;
}).exec();
}
// end: 触摸开始
bindtouchend ---- end_fn:
// start: 触摸结束
end_fn (e) {
let current_y = e.changedTouches[0].clientY;
let self = this;
let { start_scroll, inner_height, height, touch_down } = this.data;
/**
* 1、下拉刷新
* 2、上拉加载
*/
if (current_y > touch_down && current_y - touch_down > 20 && start_scroll == 0) {
// 下拉刷新 的请求和逻辑处理等
} else if (current_y < touch_down && touch_down - current_y >= 20 && inner_height - height == start_scroll) {
// 上拉加载 的请求和逻辑处理等
}
}
// end: 触摸结束
原理就是触摸的时候,检查是否在顶部或者是底部,如果在顶部,还进行下拉,就进行刷新;如果在底部了,还进行上拉,就进行加载。使用 touchstart 和 touchend 的问题是用户必须要手指离开才会触发到。如果想要在顶部下拉就刷新,可以在 touchmove 中进行判断。
需要注意的是,使用上面的方法,会使 scroll-view 上 绑定 bindscroll 、bindscrolltopupper 和 bindscrolltoploweper 等方法是无效的。
样式和动画效果的优化,自己去进行吧。
如果有更好的方法,可以在评论下,留下你的方法供大家学习。
这一篇的方法只适合安卓机的,但还是保留下来。
【微信小程序】scroll-view 的上拉加载和下拉刷新的更多相关文章
- [微信小程序] 微信小程序获取用户定位信息并加载对应城市信息,wx.getLocation,腾讯地图小程序api,微信小程序经纬度逆解析地理信息
因为需要在小程序加个定位并加载对应城市信息 然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利 ...
- 使用mescroll实现上拉加载与下拉刷新
现在上拉加载与下拉刷新几乎已经是移动端必备功能之一了,自己实现一个太麻烦,但是好用的插件又非常少.之前看到网上很多人都在用iScroll,于是也尝试用它做了几个DEMO,但或多或少都有一些问题,比如这 ...
- 你必须了解的RecyclerView的五大开源项目-解决上拉加载、下拉刷新和添加Header、Footer等问题
前段时间做项目由于采用的MD设计,所以必须要使用RecyclerView全面代替ListView.但是开发中遇到了需要实现RecyclerView上拉加载.下拉刷新和添加Header以及Footer等 ...
- 全网最easy的better-scroll实现上拉加载和下拉刷新
前言 移动端页面常见的一种效果:下拉刷新(pulldownrefresh)和上拉加载(pullupload),目的都是为了增强用户的体验效果,因此各种移动端滑动插件也是层出不穷,今天小编也在这里给大家 ...
- mescroll.js简单的上拉加载、下拉刷新插件,带完整注释
声明:本插件模仿自mescroll.js,随手所作,仅以注释提供思路,只实现了部分效果,且没有考虑兼容,有兴趣的朋友随意一看.api大家可参考mescroll.js API汇总一文. demo:点我下 ...
- UITableView与UISearchController搜索及上拉加载,下拉刷新
#import "ViewController.h" #import "TuanGouModel.h" #import "TuanGouTableVi ...
- vue.js移动端app实战4:上拉加载以及下拉刷新
上拉加载以及下拉刷新都是移动端很常见的功能,在搜索或者一些分类列表页面常常会用到. 跟横向滚动一样,我们还是采用better-scroll这个库来实现.由于better已经更新了新的版本,之前是0.几 ...
- C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法
C#构造方法(函数) 一.概括 1.通常创建一个对象的方法如图: 通过 Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...
- vue使用vant-ui实现上拉加载、下拉刷新和返回顶部
vue使用vant-ui实现上拉加载.下拉刷新和返回顶部 vue现在在移动端常用的ui库有vant-ui和mint-ui,上拉加载.下拉刷新和返回顶部也是移动端最基础最常见的功能.下面就用vant-u ...
随机推荐
- 几种常见的Preference总结
DialogPreference共性 DialogPreference通用属性 说明 android:dialogIco 对话框的icon android:dialogLayout dialog的co ...
- Redis数据结构和使用场景,redis内存淘汰策略
什么样的数据适合放入Redis? sql执行耗时特别久,且结果不频繁变动的数据,适合放入Redis. Redis是单线程的,为什么会这么快? 纯内存操作 单线程操作,避免频繁的上下文切换 采用了非阻塞 ...
- mysql审计插件-记录所有sql语句
https://www.58jb.com/html/160.html https://www.jianshu.com/p/a0e0aec3cb6f MySQL审计工具Audit Plugin安装使用 ...
- Win10-安装.net 2,3,.3.5
win10x64(ver1809).iso放镜像到光驱后执行cmd(.net3.5包括2和3)dism.exe /online /enable-feature /featurename:NetFx3 ...
- kubernetes-使用kubeadm部署kubernetes集群
k8s官网介绍 Kubernetes是一个可移植的,可扩展的开源平台,用于管理容器化的工作负载和服务,可促进声明式配置和自动化.它拥有一个庞大且快速增长的生态系统.Kubernetes的服务,支持和工 ...
- ISCC之msc1(签到题)
V2VsbCBkb25lIQoKIEZsYWc6IElTQ0N7TjBfMG5lX2Nhbl9zdDBwX3kwdX0K Flag: ISCC{N0_0ne_can_st0p_y0u} 签到题 八进制 ...
- MySQL线程状态详解
前言: 我们常用 show processlist 或 show full processlist 查看数据库连接状态,其中比较关注的是 State 列,此列表示该连接此刻所在的状态.那么你真的了解不 ...
- unittest单元测试框架前言
一.在我们没有学习过python语言的时候领导让我们做接口测试 我们都使用工具来做测试,一般常用的如jemeter,postman这些个工具,我来推荐使用postman 这个工具来进行接口测试,有的小 ...
- DT开发笔记-Cookie作用域的设置
当网站任意一个模块绑定了二级域名或者会员公司主页开启了二级域名时,必须设置cookie作用域,否则会导致二级域名站点不能显示正确的登录状态,js权限错误等问题(例如评论框显示不完全的现象). 进入网站 ...
- flask框架下读取mysql数据 转换成json格式API
研究了一天 因为需要从数据库拿数据然后转换成json的格式 expose出去为 API 发现一条数据是容易,两条以上我居然搞了这么久 好歹出来了 先贴一下 后面更新 mysql的操作 比较容易了htt ...