这篇文章主要介绍了小程序怎么实现下拉刷新，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
创新互联服务项目包括兴国网站建设、兴国网站制作、兴国网页制作以及兴国网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，兴国网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到兴国省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
enablePullDownRefresh
enablePullDownRefresh是最容易实现下拉刷新的方法，在json文件中将enablePullDownRefresh设置为true，在Page中监听onPullDownRefresh事件即可，支持点击顶部标题栏回到顶部，自定义标题栏时会失效，还可以通过直接调用wx.startPullDownRefresh()触发下拉刷新事件，产生下拉刷新动画，处理完下拉刷新中的数据更新后调用wx.stopPullDownRefresh()结束动画即可。
这种形式的下拉刷新的优点很明显就是简单，没有限制，但是缺点也同样明显：
scroll-view
scroll-view是官方的一个滚动视图组件，使用很简单，想要设置上拉刷新代码如下：
content
想要利用scroll-view实现上拉刷新，需要注意：
scroll-view缺点：
由于iOS有橡皮筋效果，因此最终效果会与Android有一定的差异
刚打开页面时上拉是无法触发上拉监听事件，需要先向下滚动，触发滚动，然后再上拉滚动才能触发监听事件
当有自定义头部时，scroll-view需要一个高度计算，减去头部高度
scroll-view优点：
官方并不推荐使用scroll-view做下拉刷新，官方文档上有这样一个tip
自定义下拉刷新
自定义下拉刷新最主要希望解决的问题还是在Android使用enablePullDownRefresh时fixed定位的标题栏或导航栏会被下拉的问题，同时两端在下拉刷新时的动画保持一致，其实实现起来并不难，接下来就看看具体实现:
wxml:
{{state === 0 ? '下拉刷新' : state === 1? '松开刷新' : '刷新中'}}
这个文件定义组件的模版，有一个滚动view包裹，绑定了touch事件，里面包含下拉刷新时的动画，和一个slot，slot用于插入滚动列表的内容
wxss:
.animation {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 150rpx;
margin-bottom: -150rpx;
background-color: #fff;
}
.loading {
width: 30rpx;
height: 30rpx;
border:6rpx solid #333333;
border-bottom: #cccccc 6rpx solid;
border-radius: 50%;
animation:load 1.1s infinite linear;
}
@keyframes load{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
.tip {
margin-left: 10rpx;
color: #666;
}样式文件这没什么特别的
js:
let lastY = 0 // 上一次滚动的位置
let scale = 750 / wx.getSystemInfoSync().windowWidth // rpx转化比例
Component({
options: {
multipleSlots: true
},
data: {
scrollTop: 0,
translateHeight: 0, // 平移距离
state: -1
},
properties: {
// 触发下拉刷新的距离
upperDistance: {
type: Number,
value: 150
}
},
methods: {
// 监听滚动，获取scrollTop
onPageScroll (e) {
this.data.scrollTop = e.scrollTop
},
touchStart (e) {
lastY = e.touches[0].clientY
},
touchMove (e) {
let clientY = e.touches[0].clientY
let offset = clientY - lastY
if (this.data.scrollTop > 0 || offset < 0) return
this.data.translateHeight += offset
this.data.state = 0
lastY = e.touches[0].clientY
if (this.data.translateHeight - this.data.scrollTop * scale > this.data.upperDistance) {
this.data.state = 1
}
this.setData({
translateHeight: this.data.translateHeight,
state: this.data.state
})
},
touchEnd (e) {
if (this.data.translateHeight - this.data.scrollTop * scale > this.data.upperDistance) {
this.setData({
translateHeight: 150
})
this.triggerEvent('scrolltoupper')
this.setData({
state: 2
})
} else if (this.data.scrollTop <= 0) {
this.stopRefresh()
}
},
// 停止刷新
stopRefresh () {
this.setData({
translateHeight: 0,
state: -1
}, () => {
wx.pageScrollTo({
scrollTop: 0,
duration: 0
})
})
}
}
})这个下拉刷新组件最重要的是控制下拉刷新的时机，代码体现就是定义了一个upperDistance，下拉刷新的距离来判断是否执行刷新。手指滑动时，获取滑动距离，translateHeight累加用于展示，在touchEnd事件中判断滑动距离是否达到设定值，达到设定值就发送scrolltoupper事件，在父组件中监听即可，否则停止刷新。
使用：
{{item}}
Page({
data: {
list: []
},
onLoad: function () {
this.refreshScroll = this.selectComponent('#refreshScroll')
for (let i = 0; i < 10; i++) {
this.data.list.push(i)
}
this.setData({
list: this.data.list
})
},
onPageScroll (e) {
this.refreshScroll.onPageScroll(e)
},
onReachBottom () {
wx.showLoading({
title: 'onReachBottom'
})
setTimeout(() => {
wx.hideLoading()
}, 1000)
},
refresh: function (e) {
setTimeout(() => {
this.refreshScroll.stopRefresh()
}, 1000)
}
})在使用时关键是要将页面中onPageScroll中获取的值传递下去，然后bindscrolltoupper监听scrolltoupper事件，执行刷新操作然后再调用stopRefresh停止刷新，下来看真机上的测试效果：
iOS:
Android:
在真机测试时，表现都还不错，当然了，这只是自定义下拉刷新的一个简单组件例子，如果需要用于到实际项目，可能还需要自己去完善，毕竟不同的人应用的场景不同，这里只是给出了一个思路而已
感谢你能够认真阅读完这篇文章，希望小编分享的“小程序怎么实现下拉刷新”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
网站栏目：小程序怎么实现下拉刷新
本文地址：
http://bzwzjz.com/article/gpeepe.html
