547 lines
15 KiB
JavaScript
547 lines
15 KiB
JavaScript
// miniprogram_npm/coolui-scroller/second-floor/index.js
|
||
Component({
|
||
options: {
|
||
multipleSlots: true,
|
||
addGlobalClass: true,
|
||
},
|
||
externalClasses: ['second-floor-class'],
|
||
relations: {
|
||
'../second-floor-refresh/index': {
|
||
type: 'child',
|
||
linked(target) {
|
||
// console.log(target);
|
||
},
|
||
},
|
||
'../nav-bar/index': {
|
||
type: 'child',
|
||
linked(target) {
|
||
// console.log(target.data)
|
||
// console.log(target.data.statusBarHeight)
|
||
// this.setData({
|
||
// navBar: target,
|
||
// })
|
||
},
|
||
},
|
||
},
|
||
properties: {
|
||
threshold: {
|
||
type: Number,
|
||
value: 0,
|
||
},
|
||
offset: {
|
||
type: Number,
|
||
value: 0,
|
||
},
|
||
center: {
|
||
type: Boolean,
|
||
value: false,
|
||
observer: function (newVal) {
|
||
this.init()
|
||
},
|
||
},
|
||
bottom: {
|
||
type: Boolean,
|
||
value: true,
|
||
observer: function (newVal) {
|
||
this.init()
|
||
},
|
||
},
|
||
top: {
|
||
type: Boolean,
|
||
value: false,
|
||
observer: function (newVal) {
|
||
this.init()
|
||
},
|
||
},
|
||
scale: {
|
||
type: Boolean,
|
||
value: false,
|
||
observer: function (newVal) {
|
||
this.init()
|
||
},
|
||
},
|
||
tip: {
|
||
type: Object,
|
||
value: {
|
||
show: false,
|
||
height: 100,
|
||
times: 1,
|
||
duration: 2000,
|
||
},
|
||
},
|
||
},
|
||
data: {
|
||
scroll_height: 0,
|
||
touchy: 0,
|
||
isLoading: false,
|
||
isFloorShow: false,
|
||
wapperAnimationData: {},
|
||
innerAnimationData: {},
|
||
statusBarHeight: 0,
|
||
navBar: null,
|
||
},
|
||
lifetimes: {
|
||
attached: function () {
|
||
// 在组件实例进入页面节点树时执行
|
||
// this.init()
|
||
let info = wx.getSystemInfoSync()
|
||
console.log(info)
|
||
this.setData({
|
||
scroll_height: info.windowHeight,
|
||
})
|
||
},
|
||
},
|
||
ready() {
|
||
this.init(() => {
|
||
this.navNodes = this.getRelationNodes('../nav-bar/index')
|
||
this.navNode = this.navNodes[0] ? this.navNodes[0] : null
|
||
this.setData({
|
||
statusBarHeight: this.navNode.data.statusBarHeight,
|
||
})
|
||
})
|
||
},
|
||
methods: {
|
||
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,
|
||
})
|
||
}
|
||
},
|
||
/**
|
||
* @name: 初始化
|
||
* @description: 根据设置初始化动画，初始化参数，初始化子组件
|
||
* @return {*}
|
||
*/
|
||
init(callback = null) {
|
||
let info = wx.getSystemInfoSync()
|
||
this.refreshNodes = this.getRelationNodes('../second-floor-refresh/index')
|
||
this.refreshNode = this.refreshNodes[0] ? this.refreshNodes[0] : null
|
||
this.refreshNode.setData({
|
||
scroll_height: this.data.scroll_height,
|
||
})
|
||
this.refreshNode.setDown()
|
||
let animation = this.setAnimation(
|
||
-this.data.scroll_height + this.data.offset,
|
||
0
|
||
)
|
||
console.log(this.data.offset)
|
||
let animationInner = null
|
||
let scaleXy = this.data.scale ? 0.1 : 1
|
||
if (this.data.top) {
|
||
animationInner = this.setAnimation(
|
||
this.data.scroll_height,
|
||
0,
|
||
scaleXy,
|
||
scaleXy
|
||
)
|
||
}
|
||
if (this.data.center) {
|
||
animationInner = this.setAnimation(
|
||
this.data.scroll_height / 2,
|
||
0,
|
||
scaleXy,
|
||
scaleXy
|
||
)
|
||
}
|
||
if (this.data.bottom) {
|
||
animationInner = this.setAnimation(0, 0, scaleXy, scaleXy)
|
||
}
|
||
this.setData(
|
||
{
|
||
wapperAnimationData: animation.export(),
|
||
innerAnimationData: animationInner ? animationInner.export() : {},
|
||
threshold: this.data.threshold,
|
||
},
|
||
() => {
|
||
this.wapper = this.selectComponent('.second-floor-wapper')
|
||
if (callback) {
|
||
callback()
|
||
}
|
||
if (this.data.tip.show) {
|
||
this.tipShow()
|
||
}
|
||
}
|
||
)
|
||
},
|
||
tipShow(
|
||
duration = this.data.tip.duration,
|
||
wait = this.data.tip.duration,
|
||
times = this.data.tip.times
|
||
) {
|
||
const animation = wx.createAnimation()
|
||
let offset = -this.data.scroll_height + this.data.offset
|
||
animation.translateY(offset).step({
|
||
duration,
|
||
timingFunction: 'ease-in',
|
||
})
|
||
this.setData(
|
||
{
|
||
wapperAnimationData: animation.export(),
|
||
threshold: 0,
|
||
},
|
||
() => {
|
||
this.refreshNode.setText(this.data.scroll_height / 2)
|
||
if (this.data.tip.show) {
|
||
setTimeout(() => {
|
||
animation
|
||
.translateY(-this.data.scroll_height + this.data.tip.height)
|
||
.step({
|
||
duration,
|
||
timingFunction: 'ease-out',
|
||
})
|
||
this.setData(
|
||
{
|
||
wapperAnimationData: animation.export(),
|
||
threshold: this.data.tip.height,
|
||
},
|
||
() => {
|
||
this.refreshNode.setText(this.data.scroll_height / 2)
|
||
if (times > 1) {
|
||
setTimeout(() => {
|
||
this.tipShow(duration, wait, times - 1)
|
||
}, wait)
|
||
} else {
|
||
setTimeout(() => {
|
||
this.setData(
|
||
{
|
||
tip: {
|
||
show: false,
|
||
height: this.data.tip.height,
|
||
times: this.data.tip.times,
|
||
},
|
||
},
|
||
() => {
|
||
this.tipShow(duration, wait, times - 1)
|
||
}
|
||
)
|
||
}, wait)
|
||
}
|
||
}
|
||
)
|
||
}, duration)
|
||
}
|
||
}
|
||
)
|
||
},
|
||
/**
|
||
* @name: 触摸拖拽开始
|
||
* @description: 记录初始触摸位置
|
||
* @param {*} e
|
||
* @return {*}
|
||
*/
|
||
touchStart(e) {
|
||
console.log(this.data.tip.show)
|
||
// 正在刷新时不操作触摸
|
||
if (this.data.tip.show) {
|
||
return false
|
||
}
|
||
if (this.data.isLoading) {
|
||
return false
|
||
}
|
||
this.setData({
|
||
touchy: e.changedTouches[0].clientY,
|
||
})
|
||
},
|
||
/**
|
||
* @name: 拖动时执行
|
||
* @description: 修改页面动画，传递触摸动态参数给refresh组件
|
||
* @return {*}
|
||
*/
|
||
touchMove(e) {
|
||
if (this.data.tip.show) {
|
||
return false
|
||
}
|
||
// 正在刷新时不进行操作, 二楼已加载是不进行操作
|
||
if (!this.data.isFloorShow && !this.data.isLoading) {
|
||
const distance = Math.round(
|
||
e.changedTouches[0].clientY - this.data.touchy
|
||
)
|
||
let scaleXy = 1
|
||
if (this.data.scale) {
|
||
scaleXy = 0.1 + distance / 200
|
||
scaleXy = scaleXy >= 1 ? 1 : scaleXy
|
||
}
|
||
|
||
if (distance > 0) {
|
||
let animation = this.setAnimation(
|
||
-this.data.scroll_height + distance + this.data.offset,
|
||
0
|
||
)
|
||
|
||
let animationInner = null
|
||
|
||
if (this.data.top) {
|
||
animationInner = this.setAnimation(
|
||
this.data.scroll_height - distance,
|
||
0,
|
||
scaleXy,
|
||
scaleXy
|
||
)
|
||
}
|
||
|
||
if (this.data.bottom) {
|
||
animationInner = this.setAnimation(0, 0, scaleXy, scaleXy)
|
||
}
|
||
|
||
if (this.data.center) {
|
||
animationInner = this.setAnimation(
|
||
(this.data.scroll_height - distance) / 2,
|
||
0,
|
||
scaleXy,
|
||
scaleXy
|
||
)
|
||
}
|
||
// console.log(animationInner);
|
||
this.setData({
|
||
wapperAnimationData: animation.export(),
|
||
innerAnimationData: animationInner ? animationInner.export() : null,
|
||
threshold: distance,
|
||
})
|
||
this.refreshNode.setText(distance)
|
||
}
|
||
}
|
||
},
|
||
/**
|
||
* @name: 松手后执行
|
||
* @description: 松手时如果拖拽的距离大于屏幕三分之一，直接执行拉到二楼动画，如果大于六分之一小于三分之一则回到六分之一并开启刷新状态，如果小于六分之一直接回弹
|
||
* @return {*}
|
||
*/
|
||
touchEnd() {
|
||
if (this.data.tip.show) {
|
||
return false
|
||
}
|
||
// 正在刷新时不进行操作, 二楼已加载是不进行操作，只点屏幕不拖拽时不进行操作
|
||
if (
|
||
!this.data.isFloorShow &&
|
||
this.data.threshold > 0 &&
|
||
!this.data.isLoading
|
||
) {
|
||
// 大于3分之1 直接拉到二楼
|
||
if (this.data.threshold > this.data.scroll_height / 3) {
|
||
const animation = this.setAnimation(0, 400)
|
||
let animationInner = null
|
||
if (this.data.top) {
|
||
animationInner = this.setAnimation(0, 400, 1, 1)
|
||
}
|
||
if (this.data.bottom) {
|
||
animationInner = this.setAnimation(0, 0, 1, 1)
|
||
}
|
||
|
||
if (this.data.center) {
|
||
animationInner = this.setAnimation(0, 400, 1, 1)
|
||
}
|
||
this.setData(
|
||
{
|
||
wapperAnimationData: animation.export(),
|
||
innerAnimationData: animationInner ? animationInner.export() : {},
|
||
},
|
||
() => {
|
||
setTimeout(() => {
|
||
this.refreshNode.setSecondShow(true)
|
||
this.setData({
|
||
isFloorShow: true,
|
||
})
|
||
this.triggerEvent('secondShow')
|
||
}, 400)
|
||
}
|
||
)
|
||
} else {
|
||
if (this.data.threshold > this.data.scroll_height / 6) {
|
||
// 大于6分之一，小于3分之一，回到 6分之一停顿开始刷新
|
||
const animation = this.setAnimation(
|
||
-this.data.scroll_height + this.data.scroll_height / 6,
|
||
400
|
||
)
|
||
let animationInner = null
|
||
if (this.data.top) {
|
||
animationInner = this.setAnimation(
|
||
this.data.scroll_height - this.data.scroll_height / 6,
|
||
400
|
||
)
|
||
}
|
||
if (this.data.bottom) {
|
||
animationInner = this.setAnimation(0, 0)
|
||
}
|
||
if (this.data.center) {
|
||
animationInner = this.setAnimation(
|
||
(this.data.scroll_height - this.data.scroll_height / 6) / 2,
|
||
400
|
||
)
|
||
}
|
||
this.setData(
|
||
{
|
||
wapperAnimationData: animation.export(),
|
||
innerAnimationData: animationInner
|
||
? animationInner.export()
|
||
: {},
|
||
},
|
||
() => {
|
||
this.triggerEvent('refresh')
|
||
this.setData({
|
||
isLoading: true,
|
||
})
|
||
this.refreshNode.setLoading(true)
|
||
}
|
||
)
|
||
} else {
|
||
// 小于6分之一 直接回顶部
|
||
this.back(false)
|
||
}
|
||
}
|
||
}
|
||
},
|
||
/**
|
||
* @name: 回弹及二楼关闭
|
||
* @description: 拖动小于6分之一直接回顶部或外部自定义调用关闭二楼
|
||
* @return {*}
|
||
*/
|
||
back(callback = true) {
|
||
return new Promise((resolve) => {
|
||
const animation = this.setAnimation(
|
||
-this.data.scroll_height + this.data.offset,
|
||
800
|
||
)
|
||
let animationInner = null
|
||
|
||
if (this.data.top) {
|
||
animationInner = this.setAnimation(
|
||
this.data.scroll_height,
|
||
800,
|
||
1,
|
||
this.data.scale ? 0 : 1
|
||
)
|
||
}
|
||
if (this.data.bottom) {
|
||
animationInner = this.setAnimation(0, 0, 1, this.data.scale ? 0 : 1)
|
||
}
|
||
if (this.data.center) {
|
||
animationInner = this.setAnimation(
|
||
this.data.scroll_height / 2,
|
||
800,
|
||
1,
|
||
this.data.scale ? 0 : 1
|
||
)
|
||
}
|
||
this.setData(
|
||
{
|
||
wapperAnimationData: animation.export(),
|
||
innerAnimationData: animationInner ? animationInner.export() : {},
|
||
},
|
||
() => {
|
||
setTimeout(() => {
|
||
// this.refreshNode.setShow(false)
|
||
this.refreshNode.setDown()
|
||
this.setData(
|
||
{
|
||
isFloorShow: false,
|
||
threshold: 0,
|
||
},
|
||
() => {
|
||
if (callback) {
|
||
this.triggerEvent('secondBack')
|
||
resolve()
|
||
}
|
||
}
|
||
)
|
||
}, 800)
|
||
}
|
||
)
|
||
})
|
||
},
|
||
/**
|
||
* @name: 刷新后的回弹
|
||
* @description: 刷新之后回弹方法，再请求完数据之后执行
|
||
* @return {*}
|
||
*/
|
||
settriggered() {
|
||
return new Promise((resolve) => {
|
||
const animation = this.setAnimation(
|
||
-this.data.scroll_height + this.data.offset,
|
||
800
|
||
)
|
||
let animationInner = null
|
||
|
||
if (this.data.top) {
|
||
animationInner = this.setAnimation(
|
||
this.data.scroll_height,
|
||
800,
|
||
1,
|
||
this.data.scale ? 0 : 1
|
||
)
|
||
}
|
||
if (this.data.bottom) {
|
||
animationInner = this.setAnimation(0, 0, 1, this.data.scale ? 0 : 1)
|
||
}
|
||
if (this.data.center) {
|
||
animationInner = this.setAnimation(
|
||
this.data.scroll_height / 2,
|
||
800,
|
||
1,
|
||
this.data.scale ? 0 : 1
|
||
)
|
||
}
|
||
this.setData(
|
||
{
|
||
wapperAnimationData: animation.export(),
|
||
innerAnimationData: animationInner ? animationInner.export() : {},
|
||
isLoading: false,
|
||
},
|
||
() => {
|
||
setTimeout(() => {
|
||
this.refreshNode.setDown()
|
||
this.setData(
|
||
{
|
||
threshold: 0,
|
||
},
|
||
() => {
|
||
resolve()
|
||
}
|
||
)
|
||
}, 400)
|
||
}
|
||
)
|
||
})
|
||
},
|
||
setAnimation(
|
||
y,
|
||
duration = 400,
|
||
scale = 1,
|
||
opacity = 1,
|
||
timingFunction = 'ease-out'
|
||
) {
|
||
let transformOrigin = '50% 50% 0'
|
||
if (this.data.top) {
|
||
transformOrigin = '50% 0 0'
|
||
}
|
||
if (this.data.bottom) {
|
||
transformOrigin = '50% 100% 0'
|
||
}
|
||
if (this.data.center) {
|
||
transformOrigin = '50% 50% 0'
|
||
}
|
||
const animation = wx.createAnimation({
|
||
delay: 0,
|
||
duration: duration,
|
||
timingFunction: timingFunction,
|
||
transformOrigin: transformOrigin,
|
||
})
|
||
animation.translateY(y).scale(scale, scale).opacity(opacity)
|
||
|
||
animation.step()
|
||
|
||
return animation
|
||
},
|
||
},
|
||
})
|