290 lines
7.0 KiB
JavaScript
290 lines
7.0 KiB
JavaScript
var current = 0; //默认当前页面为第0页
|
||
|
||
Component({
|
||
options: {
|
||
multipleSlots: true //开启多slot支持
|
||
},
|
||
/**
|
||
* 组件的属性列表
|
||
*/
|
||
properties: {
|
||
//scroll-view视图容器高度
|
||
height: {
|
||
type: String,
|
||
value: "0px"
|
||
},
|
||
//竖向滚动条位置
|
||
scrollTop: {
|
||
type: Number,
|
||
value: 0
|
||
},
|
||
//自定义下拉刷新阈值(单位：px)
|
||
refresherThreshold: {
|
||
type: Number,
|
||
value: 100
|
||
},
|
||
//自定义下拉刷新区域背景颜色
|
||
refresherBackground: {
|
||
type: String,
|
||
value: "#f6f6f6"
|
||
},
|
||
//下拉刷新状态(false表示未被下拉，true表示被下拉)
|
||
refresherTriggered: {
|
||
type: Boolean,
|
||
value: false
|
||
},
|
||
//下拉样式(可取值为：cricle-progress、diy)
|
||
pullStyle: {
|
||
type: String,
|
||
value: "circle-progress"
|
||
},
|
||
//刷新样式(可取值:circle、clock、diy)
|
||
refreshStyle: {
|
||
type: String,
|
||
value: "circle"
|
||
},
|
||
//下拉提示
|
||
pullTip: {
|
||
type: String,
|
||
value: "下拉刷新"
|
||
},
|
||
//释放提示
|
||
releaseTip: {
|
||
type: String,
|
||
value: "释放刷新"
|
||
},
|
||
//刷新提示
|
||
refreshTip: {
|
||
type: String,
|
||
value: "正在刷新中"
|
||
},
|
||
//提示字体颜色
|
||
tipTextColor:{
|
||
type:String,
|
||
value:"#b2b2b2"
|
||
},
|
||
//是否开启加载更多(默认不开启)
|
||
loadMore: {
|
||
type: Boolean,
|
||
value: false
|
||
},
|
||
//是否显示加载动画
|
||
showLoading: {
|
||
type: Boolean,
|
||
value: false
|
||
},
|
||
//加载样式
|
||
loadStyle: {
|
||
type: String,
|
||
value: "circle"
|
||
},
|
||
//加载提示
|
||
loadTip: {
|
||
type: String,
|
||
value: "正在加载中"
|
||
},
|
||
//加载背景
|
||
loadBackground: {
|
||
type: String,
|
||
value: "#f6f6f6"
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 组件的初始数据
|
||
*/
|
||
data: {
|
||
canRelease: false, //是否可以释放刷新
|
||
isRefreshing: false //标识是否刷新
|
||
},
|
||
/**
|
||
* 组件生命周期
|
||
*/
|
||
lifetimes: {
|
||
attached: function () {
|
||
var throttleLoad = this._throttleLoad(2000);
|
||
this.setData({
|
||
throttleLoad: throttleLoad
|
||
});
|
||
}
|
||
},
|
||
/**
|
||
* 组件的方法列表
|
||
*/
|
||
methods: {
|
||
//下拉
|
||
onPulling: function (event) {
|
||
var p = Math.min(event.detail.dy / this.data.refresherThreshold, 1);
|
||
this._modifyTip(p);
|
||
switch (this.data.pullStyle) {
|
||
case "circle-progress":
|
||
this._circlrProgress(p);
|
||
// this.triggerEvent("refresherpulling", {
|
||
// dy: event.detail.dy
|
||
// }, {});
|
||
break;
|
||
case "diy":
|
||
this.triggerEvent("refresherpulling", {
|
||
dy: event.detail.dy
|
||
}, {});
|
||
break;
|
||
}
|
||
},
|
||
//刷新
|
||
onRefresh: function (event) {
|
||
this.setData({
|
||
isRefreshing: true,
|
||
refresherTriggered: true
|
||
});
|
||
this.triggerEvent("refresherrefresh", { dy: event.detail.dy }, {});
|
||
//复位
|
||
setTimeout(() => {
|
||
this.setData({
|
||
refresherTriggered: false
|
||
});
|
||
}, 1000);
|
||
},
|
||
//复位
|
||
onRestore: function () {
|
||
this._restore();
|
||
this.triggerEvent("refresherresotre", {}, {});
|
||
},
|
||
//终止
|
||
onAbort: function () {
|
||
this._restore();
|
||
this.triggerEvent("refresherabort", {}, {});
|
||
},
|
||
//圆环进度
|
||
_circlrProgress: function (p) {
|
||
if (p <= 0.5) {
|
||
this.animate('.right-circle', [{
|
||
rotate: 135 + p * 360
|
||
}], 0);
|
||
} else {
|
||
this.animate('.right-circle', [{ rotate: 315 }], 0); //防止下拉过快，右边圈不完整
|
||
this.animate('.left-circle', [{
|
||
rotate: 135 + (p - 0.5) * 360
|
||
}], 0);
|
||
}
|
||
},
|
||
//修改提示
|
||
_modifyTip: function (p) {
|
||
var canRelease = false;
|
||
if (p == 1) {
|
||
canRelease = true;
|
||
}
|
||
this.setData({
|
||
canRelease: canRelease
|
||
});
|
||
},
|
||
//复位
|
||
_restore: function () {
|
||
this.setData({
|
||
isRefreshing: false
|
||
});
|
||
switch (this.data.pullStyle) {
|
||
case "circle-progress":
|
||
this._circleProgressRestore();
|
||
break;
|
||
case "diy":
|
||
break;
|
||
}
|
||
},
|
||
//圆环进度复位
|
||
_circleProgressRestore: function () {
|
||
this.animate(".left-circle", [{
|
||
rotate: 135
|
||
}], 0);
|
||
this.animate(".right-circle", [{
|
||
rotate: 135
|
||
}], 0);
|
||
},
|
||
/**
|
||
* 上拉加载相关函数
|
||
*/
|
||
//开始触摸
|
||
_onTouchStart: function (event) {
|
||
var _this = this;
|
||
var touchStartY = event.touches[0].clientY; //记录触摸开始位置
|
||
_this.createSelectorQuery().select(".scroll-y").fields({
|
||
size: true,
|
||
scrollOffset: true
|
||
}, (result) => {
|
||
_this.setData({
|
||
scrollViewHeight: result.height, //scoll-view容器高度(单位为px)
|
||
scrollHeight: result.scrollHeight,
|
||
touchStartY: touchStartY
|
||
});
|
||
}).exec();
|
||
},
|
||
//触摸移动
|
||
onTouchMove: function (event) {
|
||
this._getScrollInfo(event.touches[0].clientY);
|
||
},
|
||
//触摸结束
|
||
onTouchEnd: function (event) {
|
||
this._getScrollInfo(event.changedTouches[0].clientY);
|
||
},
|
||
/**
|
||
* 获取当前scroll-view的scrollTop值
|
||
* 用来判断是否加载
|
||
*/
|
||
_getScrollInfo: function (touchEndY) {
|
||
var _this = this;
|
||
_this.createSelectorQuery().select(".scroll-y").fields({
|
||
scrollOffset: true
|
||
}, (result) => {
|
||
_this.setData({
|
||
nowScrollTop: result.scrollTop
|
||
}, () => {
|
||
_this._isLoad(touchEndY);
|
||
});
|
||
}).exec();
|
||
},
|
||
//是否加载
|
||
_isLoad: function (touchEndY) {
|
||
var touchStartY = this.data.touchStartY; //开始触摸时候的位置
|
||
var nowScrollTop = this.data.nowScrollTop; //当前的scrollTop值
|
||
var scrollHeight = this.data.scrollHeight; //scroll-view容器内高度
|
||
var height = this.data.scrollViewHeight; //scoll-view容器高度
|
||
var loadMore = this.data.loadMore; //是否开启加载
|
||
if (loadMore && touchEndY < touchStartY && (scrollHeight - nowScrollTop - height < 50)) {
|
||
this.setData({
|
||
showLoading: true
|
||
});
|
||
this.data.throttleLoad();
|
||
}
|
||
},
|
||
/**
|
||
* 节流加载(采用定时器加时间戳方式)
|
||
* @param {执行时间} delay
|
||
*/
|
||
_throttleLoad: function (delay) {
|
||
var _this = this;
|
||
var timer = null;
|
||
var startTime = Date.now();
|
||
return function () {
|
||
var currentTime = Date.now();
|
||
var remainTime = delay - (currentTime - startTime);
|
||
clearTimeout(timer);
|
||
if (remainTime <= 0) {
|
||
_this.loadMore();
|
||
startTime = Date.now();
|
||
} else {
|
||
timer = setTimeout(function () { _this.loadMore() }, remainTime);
|
||
}
|
||
}
|
||
},
|
||
/**
|
||
* 加载更多
|
||
*/
|
||
loadMore: function () {
|
||
current += 1;
|
||
this.triggerEvent("loadmore", { current, current }, {});
|
||
//复位
|
||
setTimeout(() => {
|
||
this.setData({ showLoading: false });
|
||
}, 1000);
|
||
}
|
||
}
|
||
}) |