cyx-ament-wechat/miniprogram/pages/component/pullRefreshView/pullRefreshView.js

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
})
}
},
})