scroll-view實現下拉刷新和上拉載入更多

實現微信小程序的下來刷新和上拉載入的實現。當然我所說的就是利用srollvies實現的，目前微信小程序的滾動控制項只有一個，不像安卓擁有多種滾動視圖，微信小程序的scrollview跟安卓的大部分滾動視圖差不多，都有滾動到頂部和底部的監聽事件。既然有這監聽事件，那就簡單多了，接下來只需要知道在頂部和底部手指按下和抬起中間過程中的距離就可以實現。

本案例中總共實現了五個方法，分別是bindscrolltoupper（滑動到頂部）、bindscrolltolower（滑動到底部）、bindscroll（滑動中）、bindtouchstart（手指按下監聽）、bindtouchend（手指抬起監聽）

image.png

實現思路：

1.模擬網路載入出列表數據

2.定義一個變數記錄是否滾動到頂部或者滾動中或者滾動到底部

3.分別實現bindscrolltoupper、bindscrolltolower、bindscroll的監聽，並修改之前定義的變數，代表其狀態

4.分別實現bindtouchstart、bindtouchend的監聽，對其滑動Y方向進行判斷，觸發刷新和載入方法。

實現效果：

image.png

1.視圖層：

<scroll-view scroll-y="true" bindscrolltoupper="scrollToTop" bindscrolltolower="scrollToBottom" bindscroll="scroll" stylex="height: 600px;" upper-threshold="0" lower-threshold="0" bindtouchstart="start" bindtouchend="end"
>
<view wx:if="{{isRefresh}}" class="refresh_root">
<image src="../../images/timg.gif" class="refresh"></image>
<view><text>正在刷新...</text></view>
</view>
<block wx:for="{{showList}}">
<view class="showItem">{{item}}</view>
</block>
<view wx:if="{{isLoadMore}}" class="refresh_root">
<image src="../../images/timg.gif" class="refresh"></image>
<view><text>拚命載入中...</text></view>
</view>
</scroll-view>

1. 控制層

var util = require("../../../utils/util.js")
Page({
data: {
showList: [],
sstatus: 1,// 1是滑動到頂部 2是滑動中中 3是滑動到底部
isRefresh: false,//是否顯示刷新頭
isLoadMore: false,//載入更多
clientY: 0,//Y方向手指按下的方向
},
/**
* 初始化數據
*/
onLoad: function (e) {
var arr = new Array(30)
for (var i = 0; i < arr.length; i++) {
arr[i] = "回家過年" + (i + 1);
}
this.setData({
showList: arr
})
},
//滑動到頂端
scrollToTop: function (e) {
this.setData({
sstatus: 1
})
},
//滑動到底部
scrollToBottom: function (e) {
this.setData({
sstatus: 3
})
},
/**
* 滑動中
*/
scroll: function (e) {
this.setData({
sstatus: 2,
})
},
/**
* 手指按下
*/
start: function (e) {
console.log(e)
var touchPoint = e.touches[0];
var clientY = touchPoint.clientY
this.setData({
clientY: clientY
})
},
/**
* 抬起手指
*/
end: function (e) {
console.log(e)
var context = this
var upPoint = e.changedTouches[0];
var endY = upPoint.clientY
var pointTopointY = Math.abs(endY - this.data.clientY)
var status = this.data.sstatus
util.showLog("滑動的距離:" + pointTopointY + "----:當前的狀態:" + status)
//上拉刷新
if (status == 1 && pointTopointY > 50) {
this.setData({
isRefresh: true
})
}
//上拉載入
if (status == 3 && pointTopointY > 50) {
this.setData({
isLoadMore: true
})
}
//兩秒後隱藏載入條條
setTimeout(function () {
context.setData({
isRefresh: false,//是否顯示刷新頭
isLoadMore: false,//載入更多
})
}, 3000)
},
})

1. 樣式

.refresh_root {
background-color: white;
width: 100%;
text-align: center;
margin-top: 2px;
}
.refresh {
width: 40px;
height: 40px;
}
.showItem {
background-color: white;
text-align: center;
margin-top: 2px;
padding: 5px;
}

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！