294 lines
6.7 KiB
JavaScript
294 lines
6.7 KiB
JavaScript
Component({
|
|
options: {
|
|
multipleSlots: true,
|
|
addGlobalClass: true,
|
|
},
|
|
relations: {
|
|
'../scroll-page/index': {
|
|
type: 'child',
|
|
linked: function (target) {},
|
|
},
|
|
'../nav/index': {
|
|
type: 'child',
|
|
linked: function (target) {},
|
|
},
|
|
'../empty/index': {
|
|
type: 'child',
|
|
linked: function (target) {},
|
|
},
|
|
'../refresh/index': {
|
|
type: 'child',
|
|
linked: function (target) {
|
|
this.setData({
|
|
type: target.data.type,
|
|
refreshConfig: target.data.config,
|
|
})
|
|
},
|
|
},
|
|
'../nav-pannel/index': {
|
|
type: 'parent',
|
|
linked: function (target) {
|
|
// console.log(target)
|
|
},
|
|
},
|
|
},
|
|
properties: {
|
|
isEmpty: {
|
|
type: Boolean,
|
|
value: false,
|
|
},
|
|
background: {
|
|
type: String,
|
|
value: '#f2f2f2',
|
|
},
|
|
isBackBtn: {
|
|
type: Boolean,
|
|
value: false,
|
|
},
|
|
enableFlex: {
|
|
type: Boolean,
|
|
value: false,
|
|
},
|
|
toView: {
|
|
type: String,
|
|
value: '',
|
|
},
|
|
top: {
|
|
type: Number,
|
|
value: 0,
|
|
},
|
|
animation: {
|
|
type: Boolean,
|
|
value: true,
|
|
},
|
|
},
|
|
data: {
|
|
active: false,
|
|
contentHeight: 0,
|
|
triggered: false,
|
|
isLoading: false,
|
|
timeout: null,
|
|
isBackToTopShow: false,
|
|
threshold: 0,
|
|
refreshConfig: {
|
|
shake: false,
|
|
height: 50,
|
|
style: 'black',
|
|
},
|
|
},
|
|
ready() {
|
|
this.setWapHeight()
|
|
this.refreshNodes = this.getRelationNodes('../refresh/index')
|
|
this.refreshNode = this.refreshNodes[0] ? this.refreshNodes[0] : null
|
|
},
|
|
methods: {
|
|
setWapHeight() {
|
|
const that = this
|
|
const query = that.createSelectorQuery().in(this)
|
|
query
|
|
.select('#content')
|
|
.boundingClientRect(function (res) {
|
|
if (res) {
|
|
that.setData({
|
|
contentHeight: res.height,
|
|
})
|
|
|
|
that.triggerEvent('contentHeight', res.height)
|
|
}
|
|
})
|
|
.select('#header')
|
|
.boundingClientRect(function (headerRes) {
|
|
if (headerRes) {
|
|
that.setData({
|
|
contentHeight: that.data.contentHeight - headerRes.height,
|
|
})
|
|
that.triggerEvent(
|
|
'contentHeight',
|
|
that.data.contentHeight - headerRes.height
|
|
)
|
|
}
|
|
})
|
|
.exec()
|
|
},
|
|
debounce(fn, wait) {
|
|
const that = this
|
|
that.setData({
|
|
timeout: null,
|
|
})
|
|
return function () {
|
|
if (that.data.timeout !== null) {
|
|
clearTimeout(that.data.timeout)
|
|
}
|
|
const timeout = setTimeout(() => {
|
|
fn()
|
|
}, wait)
|
|
that.setData({
|
|
timeout,
|
|
})
|
|
}
|
|
},
|
|
onLoadmore() {
|
|
const that = this
|
|
that.debounce(() => {
|
|
that.triggerEvent('loadmore')
|
|
if (that.data.refreshConfig.shake) {
|
|
wx.vibrateShort()
|
|
}
|
|
}, 500)()
|
|
},
|
|
onDefaultRefresh() {
|
|
const that = this
|
|
if (that.data.type == 'default') {
|
|
that.triggerEvent('refresh')
|
|
that.debounce(() => {
|
|
that.settriggered(false)
|
|
}, 1000)()
|
|
}
|
|
},
|
|
onRefresh() {
|
|
const that = this
|
|
if (that.data.refreshConfig.shake) {
|
|
wx.vibrateShort()
|
|
}
|
|
if (this.data.isLoading) {
|
|
console.log('refresh')
|
|
wx.showNavigationBarLoading()
|
|
if ('isAutoTriggered' in that.data.refreshConfig) {
|
|
if (that.data.refreshConfig.isAutoTriggered) {
|
|
that.triggerEvent('refresh')
|
|
that.debounce(() => {
|
|
that.settriggered(false)
|
|
setTimeout(() => {
|
|
that.onRestore()
|
|
}, 300)
|
|
}, 1000)()
|
|
} else {
|
|
if (that.data.triggered) {
|
|
that.triggerEvent('refresh')
|
|
}
|
|
}
|
|
} else {
|
|
that.triggerEvent('refresh')
|
|
that.debounce(() => {
|
|
that.settriggered(false)
|
|
setTimeout(() => {
|
|
that.onRestore()
|
|
}, 300)
|
|
}, 1000)()
|
|
}
|
|
}
|
|
},
|
|
onPulling(evt) {
|
|
console.log('pull')
|
|
const that = this
|
|
that.settriggered(true).then(() => {
|
|
// console.log(evt.detail.dy, that.data.refreshConfig.height);
|
|
let p = Math.min(
|
|
evt.detail.dy / (that.data.refreshConfig.height + 20),
|
|
1
|
|
)
|
|
that.p = p ? p : 0
|
|
that.setThreshold(that.p)
|
|
})
|
|
},
|
|
settriggered(flag) {
|
|
const that = this
|
|
return new Promise((resolve) => {
|
|
if (flag != that.data.triggered) {
|
|
if (that.refreshNode) {
|
|
that.refreshNode.setData({
|
|
triggered: flag,
|
|
})
|
|
}
|
|
that.setData(
|
|
{
|
|
triggered: flag,
|
|
},
|
|
() => {
|
|
resolve()
|
|
}
|
|
)
|
|
} else {
|
|
resolve()
|
|
}
|
|
})
|
|
},
|
|
setThreshold(p) {
|
|
const that = this
|
|
return new Promise((resolve) => {
|
|
if (that.refreshNode) {
|
|
that.refreshNode
|
|
.changeThreshold({
|
|
threshold: p,
|
|
})
|
|
.then(() => {
|
|
resolve()
|
|
})
|
|
}
|
|
})
|
|
},
|
|
onRestore() {
|
|
const that = this
|
|
if (that.data.isLoading) {
|
|
console.log('restore')
|
|
wx.hideNavigationBarLoading()
|
|
that.triggerEvent('restore')
|
|
that.debounce(() => {
|
|
that.setThreshold(0).then(() => {
|
|
that.p = 0
|
|
that.refreshNode.setLoading({
|
|
isloading: false,
|
|
})
|
|
that.setData({
|
|
isLoading: false,
|
|
triggered: false,
|
|
})
|
|
})
|
|
}, 100)()
|
|
}
|
|
},
|
|
scroll(e) {
|
|
if (e.detail.scrollTop > 100 && this.data.isBackToTopShow == false) {
|
|
this.setData({
|
|
isBackToTopShow: true,
|
|
})
|
|
} else if (
|
|
e.detail.scrollTop <= 100 &&
|
|
this.data.isBackToTopShow == true
|
|
) {
|
|
this.setData({
|
|
isBackToTopShow: false,
|
|
})
|
|
}
|
|
},
|
|
dragend() {
|
|
if (this.data.type != 'default') {
|
|
if (this.p > 0.6 && this.data.isLoading == false) {
|
|
this.setData(
|
|
{
|
|
isLoading: true,
|
|
},
|
|
() => {
|
|
this.refreshNode
|
|
.setLoading({
|
|
isloading: true,
|
|
})
|
|
.then(() => {
|
|
this.onRefresh()
|
|
})
|
|
}
|
|
)
|
|
} else {
|
|
this.settriggered(false)
|
|
}
|
|
}
|
|
},
|
|
backToTop() {
|
|
// this.triggerEvent("refresh");
|
|
this.setData({
|
|
top: 0,
|
|
})
|
|
},
|
|
},
|
|
})
|