原生JS实现下拉刷新（移动端）

主要利用touchstart、touchmove、touchend事件
结合CSS定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>* {padding: 0;margin: 0;}.box {position: absolute;top: 0;left: 0;height: 100%;width: 100%;}.list {position: relative;top: 0;width: 100%;}.list li {list-style-type: none;width: 100%;height: 35px;line-height: 35px;text-align: center;}
</style>
<body><div class="box"><ul class="list"><li>1111</li><li>2222</li><li>3333</li><li>4444</li></ul></div><script>/* e.touches： touchlist触摸点列表, 存储着触摸点对象touch*/const box = document.querySelector('.box')const list = document.querySelector('.list')// 按下屏幕的位置let touchStartPosition = 0// touchstart事件box.addEventListener('touchstart', function (e) {let touch = e.touches[0]touchStartPosition = touch.pageY// console.log(touchStartPosition)})// touchmove事件box.addEventListener('touchmove', function (e) {let touch = e.touches[0]// 列表的top值等于列表相对于box的偏移量+滑动的距离list.style.top = list.offsetTop + touch.pageY - touchStartPosition + 'px'// 实现平滑的滑动touchStartPosition = touch.pageY})// touchend事件box.addEventListener('touchend', function (e) {let top = list.offsetTopif (top > 70) {// 在此处调用刷新后的回调console.log('刷新')} if (top > 0) {// 通过定时器平滑的将list的top = 0let timer = setInterval(() => {list.style.top = top-- + 'px'if (top <= 0) {clearInterval(timer)}})}})</script>
</body>
</html>

原生JS实现下拉刷新（移动端）相关推荐

h5 ios 滚动到底部_分享iOS平台使用H5原生滚动的下拉刷新功能v1.0.0 [不推荐]
上一篇给大家分享了<使用H5原生滚动的上拉加载功能>,但是没有下拉刷新的功能,今天赶快补上. 我们在上一篇中提到,因为iOS下mui中的下拉刷新插件,使用的是自绘的模拟滚动条,不是原生的, ...
下拉刷新和上拉加载 php,基于iscroll.js实现下拉刷新和上拉加载效果
现在已经不是纯Android独霸天下的时代了,H5嵌入Android的Hybrid混合开发是大势所趋.今天给大家带来的就是移动端中常见的"上拉刷新,下拉加载"特效,这个特效将会基于 ...
js的下拉刷新和上拉加载，基于iScroll v4.2.5
html部分 <div id="wrapper" style="height: 100%"><div id="scroller&qu ...
AndroidStudio安卓原生开发_SwipeRefreshLayout_下拉刷新控件---Android原生开发工作笔记119
然后我们再来看一个SwipeRefreshLayout,这个是用来实现下拉刷新的一个UI控件. 注意这个SwipeRefreshLayout里面只能放一个子view,一般都是放一个listview.来 ...
原生JS实现下拉菜单操作
原生JavaScript实现下拉菜单的操作逻辑分析: (1)该布局实现分为两个部分,导航栏部分以及下拉菜单部分,因此我们需要使用标签的嵌套,一共使用两对ul和li标签,外面的ul构成导航栏的框架,在 ...
原生小程序下拉刷新列表且保存之前的数据
用concat这个方法存入新数组中上拉加载时再传页数回去就好了如果把加载列表的方法写在onShow里面的话建议多加一个判断不然会出先重复数据
移动端下拉刷新与页面内滑动冲突问题 iscroll 固定行表头苹果下拉反弹
此方法在安卓6的自带下拉刷新的APP内无效. 做移动app项目时,用的是app内嵌webview的方法,遇到问题. 在安卓6中,app原生自带下拉刷新,与界面内的下滑冲突. 开始考虑通过在touchm ...
移动端懒加载、下拉刷新、上拉加载
优势:提升性能实现原理:图片是通过img的src属性,当对src赋值时,浏览器就会请求图片资源. 基于这个问题,我们可以利用标签的自定义属性(data-xxx),来保存图片的路径,当我们需要加载图片 ...
js 实现上拉加载和下拉刷新
目录一.js 实现上拉加载二.js 实现下拉刷新三.注意事项一.js 实现上拉加载实现上拉加载的原理:监听滚动条滑到页面底部,然后就去做一次请求数据. window.onscroll = f ...

原生JS实现下拉刷新（移动端）

原生JS实现下拉刷新（移动端）

原生JS实现下拉刷新（移动端）相关推荐

最新文章

热门文章