166 lines
3.5 KiB
JavaScript
166 lines
3.5 KiB
JavaScript
|
// pages/component/pullRefresnView/pullRefreshView.js
|
||
|
|
// 支持下拉刷新-上拉加载的组件
|
||
|
|
Component({
|
||
|
|
options: {
|
||
|
|
multipleSlots: true
|
||
|
|
},
|
||
|
|
properties: {
|
||
|
|
height: {
|
||
|
|
type: String,
|
||
|
|
value: '84vh'
|
||
|
|
},
|
||
|
|
refresherEnable:{
|
||
|
|
type: Boolean,
|
||
|
|
value: true
|
||
|
|
},
|
||
|
|
refresherType: {
|
||
|
|
type: String,
|
||
|
|
value: 'default',
|
||
|
|
},
|
||
|
|
loadType: {
|
||
|
|
type: String,
|
||
|
|
value: 'default',
|
||
|
|
},
|
||
|
|
pullText: {
|
||
|
|
type: String,
|
||
|
|
value: '下拉刷新',
|
||
|
|
},
|
||
|
|
releaseText: {
|
||
|
|
type: String,
|
||
|
|
value: '松开立即刷新',
|
||
|
|
},
|
||
|
|
refreshText: {
|
||
|
|
type: String,
|
||
|
|
value: '正在刷新',
|
||
|
|
},
|
||
|
|
loadmoreText: {
|
||
|
|
type: String,
|
||
|
|
value: '加载中',
|
||
|
|
},
|
||
|
|
nomoreText: {
|
||
|
|
type: String,
|
||
|
|
value: '已加载全部数据',
|
||
|
|
},
|
||
|
|
noData: {
|
||
|
|
type: String,
|
||
|
|
value: '暂无数据',
|
||
|
|
},
|
||
|
|
pullDownHeight: {
|
||
|
|
type: Number,
|
||
|
|
value: 60,
|
||
|
|
},
|
||
|
|
refreshing: {
|
||
|
|
type: Boolean,
|
||
|
|
value: false,
|
||
|
|
observer: '_onRefreshFinished',
|
||
|
|
},
|
||
|
|
scrollY: {
|
||
|
|
type: Boolean,
|
||
|
|
value: true
|
||
|
|
},
|
||
|
|
nomore: {
|
||
|
|
type: Boolean,
|
||
|
|
value: false,
|
||
|
|
},
|
||
|
|
showLoading:{
|
||
|
|
type: Boolean,
|
||
|
|
value: true,
|
||
|
|
},
|
||
|
|
scrollToView:{
|
||
|
|
type:String,
|
||
|
|
value:''
|
||
|
|
},
|
||
|
|
scrollWithAnimation:{
|
||
|
|
type: Boolean,
|
||
|
|
value: false,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: {
|
||
|
|
// url: wx.$global.imageUrl,
|
||
|
|
showTop: false,
|
||
|
|
pullState: 0,
|
||
|
|
lastScrollEnd: 0,
|
||
|
|
scrollTop: 0,
|
||
|
|
isLoadMore: false,
|
||
|
|
moveY: -60,
|
||
|
|
topNum: 0,
|
||
|
|
},
|
||
|
|
attached() {
|
||
|
|
this.setData({
|
||
|
|
endY: -this.properties.pullDownHeight
|
||
|
|
})
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
//滚动事件
|
||
|
|
_onScroll: function (e) {
|
||
|
|
this.triggerEvent('scroll', e);
|
||
|
|
},
|
||
|
|
//被下拉
|
||
|
|
_onPulling: function (e) {
|
||
|
|
let y = e.detail.dy
|
||
|
|
if (y < this.properties.pullDownHeight) {
|
||
|
|
this.setData({
|
||
|
|
pullState: 0
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
this.setData({
|
||
|
|
pullState: 1
|
||
|
|
})
|
||
|
|
}
|
||
|
|
this.triggerEvent('onpulling',this.data.pullState);
|
||
|
|
},
|
||
|
|
//滚动到顶部
|
||
|
|
_onScrollTop: function (e){
|
||
|
|
this.triggerEvent('scrolltoupper', e);
|
||
|
|
},
|
||
|
|
//下拉刷新关闭了
|
||
|
|
_onClose: function (e) {
|
||
|
|
this.triggerEvent('onrefreshclose', e);
|
||
|
|
},
|
||
|
|
//下拉刷新执行
|
||
|
|
_onRefresh: function (e) {
|
||
|
|
this.setData({
|
||
|
|
pullState: 2
|
||
|
|
})
|
||
|
|
this.triggerEvent('onrefresh', e);
|
||
|
|
},
|
||
|
|
//滚动到底部
|
||
|
|
_onLoadmore: function (e) {
|
||
|
|
this.triggerEvent('scrolltolower', e)
|
||
|
|
// !this.properties.nomore &&
|
||
|
|
if (!this.properties.refreshing) {
|
||
|
|
this.triggerEvent('loadmore', e);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
goTop(){
|
||
|
|
console.log('到顶部')
|
||
|
|
this.setData({
|
||
|
|
topNum:0
|
||
|
|
})
|
||
|
|
},
|
||
|
|
getScrollPosition(e) {
|
||
|
|
if( e.detail.scrollTop > 800 ) {
|
||
|
|
this.setData({
|
||
|
|
showTop: true
|
||
|
|
})
|
||
|
|
}else{
|
||
|
|
this.setData({
|
||
|
|
showTop: false
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
//触发一个重绘的动作 否则经常不能横向切换
|
||
|
|
this.triggerEvent('resizeactioin')
|
||
|
|
},
|
||
|
|
handlerTouchend() {
|
||
|
|
this.triggerEvent('resizeactioin')
|
||
|
|
},
|
||
|
|
hideGoTop() {
|
||
|
|
console.log('隐藏 go top')
|
||
|
|
this.setData({
|
||
|
|
showTop: false
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
})
|