mirror of
https://gitee.com/hhyykk/ipms-sjy.git
synced 2025-07-06 23:25:06 +08:00
初始化 uniapp 小程序
This commit is contained in:
YunaiV
245
yudao-vue-ui/components/uni-swipe-action-item/bindingx.js
Normal file
245
yudao-vue-ui/components/uni-swipe-action-item/bindingx.js
Normal file
@ -0,0 +1,245 @@
|
||||
const BindingX = uni.requireNativePlugin('bindingx');
|
||||
const dom = uni.requireNativePlugin('dom');
|
||||
const animation = uni.requireNativePlugin('animation');
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
right: 0,
|
||||
button: [],
|
||||
preventGesture: false
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
show(newVal) {
|
||||
if (!this.position || JSON.stringify(this.position) === '{}') return;
|
||||
if (this.autoClose) return
|
||||
if (this.isInAnimation) return
|
||||
if (newVal) {
|
||||
this.open()
|
||||
} else {
|
||||
this.close()
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (this.swipeaction.children !== undefined) {
|
||||
this.swipeaction.children.push(this)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.boxSelector = this.getEl(this.$refs['selector-box-hock']);
|
||||
this.selector = this.getEl(this.$refs['selector-content-hock']);
|
||||
this.buttonSelector = this.getEl(this.$refs['selector-button-hock']);
|
||||
this.position = {}
|
||||
this.x = 0
|
||||
setTimeout(() => {
|
||||
this.getSelectorQuery()
|
||||
}, 200)
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.timing) {
|
||||
BindingX.unbind({
|
||||
token: this.timing.token,
|
||||
eventType: 'timing'
|
||||
})
|
||||
}
|
||||
if (this.eventpan) {
|
||||
BindingX.unbind({
|
||||
token: this.eventpan.token,
|
||||
eventType: 'pan'
|
||||
})
|
||||
}
|
||||
this.swipeaction.children.forEach((item, index) => {
|
||||
if (item === this) {
|
||||
this.swipeaction.children.splice(index, 1)
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
onClick(index, item) {
|
||||
this.$emit('click', {
|
||||
content: item,
|
||||
index
|
||||
})
|
||||
},
|
||||
touchstart(e) {
|
||||
if (this.isInAnimation) return
|
||||
if (this.stop) return
|
||||
this.stop = true
|
||||
if (this.autoClose) {
|
||||
this.swipeaction.closeOther(this)
|
||||
}
|
||||
let endWidth = this.right
|
||||
let boxStep = `(x+${this.x})`
|
||||
let pageX = `${boxStep}> ${-endWidth} && ${boxStep} < 0?${boxStep}:(x+${this.x} < 0? ${-endWidth}:0)`
|
||||
|
||||
let props = [{
|
||||
element: this.selector,
|
||||
property: 'transform.translateX',
|
||||
expression: pageX
|
||||
}]
|
||||
|
||||
let left = 0
|
||||
for (let i = 0; i < this.options.length; i++) {
|
||||
let buttonSelectors = this.getEl(this.$refs['button-hock'][i]);
|
||||
if (this.button.length === 0 || !this.button[i] || !this.button[i].width) return
|
||||
let moveMix = endWidth - left
|
||||
left += this.button[i].width
|
||||
let step = `(${this.x}+x)/${endWidth}`
|
||||
let moveX = `(${step}) * ${moveMix}`
|
||||
let pageButtonX = `${moveX}&& (x+${this.x} > ${-endWidth})?${moveX}:${-moveMix}`
|
||||
props.push({
|
||||
element: buttonSelectors,
|
||||
property: 'transform.translateX',
|
||||
expression: pageButtonX
|
||||
})
|
||||
}
|
||||
|
||||
this.eventpan = this._bind(this.boxSelector, props, 'pan', (e) => {
|
||||
if (e.state === 'end') {
|
||||
this.x = e.deltaX + this.x;
|
||||
if (this.x < -endWidth) {
|
||||
this.x = -endWidth
|
||||
}
|
||||
if (this.x > 0) {
|
||||
this.x = 0
|
||||
}
|
||||
this.stop = false
|
||||
this.bindTiming();
|
||||
}
|
||||
})
|
||||
},
|
||||
touchend(e) {
|
||||
this.$nextTick(() => {
|
||||
if (this.isopen && !this.isDrag && !this.isInAnimation) {
|
||||
this.close()
|
||||
}
|
||||
})
|
||||
},
|
||||
bindTiming() {
|
||||
if (this.isopen) {
|
||||
this.move(this.x, -this.right)
|
||||
} else {
|
||||
this.move(this.x, -40)
|
||||
}
|
||||
},
|
||||
move(left, value) {
|
||||
if (left >= value) {
|
||||
this.close()
|
||||
} else {
|
||||
this.open()
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 开启swipe
|
||||
*/
|
||||
open() {
|
||||
this.animation(true)
|
||||
},
|
||||
/**
|
||||
* 关闭swipe
|
||||
*/
|
||||
close() {
|
||||
this.animation(false)
|
||||
},
|
||||
/**
|
||||
* 开启关闭动画
|
||||
* @param {Object} type
|
||||
*/
|
||||
animation(type) {
|
||||
this.isDrag = true
|
||||
let endWidth = this.right
|
||||
let time = 200
|
||||
this.isInAnimation = true;
|
||||
|
||||
let exit = `t>${time}`;
|
||||
let translate_x_expression = `easeOutExpo(t,${this.x},${type?(-endWidth-this.x):(-this.x)},${time})`
|
||||
let props = [{
|
||||
element: this.selector,
|
||||
property: 'transform.translateX',
|
||||
expression: translate_x_expression
|
||||
}]
|
||||
|
||||
let left = 0
|
||||
for (let i = 0; i < this.options.length; i++) {
|
||||
let buttonSelectors = this.getEl(this.$refs['button-hock'][i]);
|
||||
if (this.button.length === 0 || !this.button[i] || !this.button[i].width) return
|
||||
let moveMix = endWidth - left
|
||||
left += this.button[i].width
|
||||
let step = `${this.x}/${endWidth}`
|
||||
let moveX = `(${step}) * ${moveMix}`
|
||||
let pageButtonX = `easeOutExpo(t,${moveX},${type ? -moveMix + '-' + moveX: 0 + '-' + moveX},${time})`
|
||||
props.push({
|
||||
element: buttonSelectors,
|
||||
property: 'transform.translateX',
|
||||
expression: pageButtonX
|
||||
})
|
||||
}
|
||||
|
||||
this.timing = BindingX.bind({
|
||||
eventType: 'timing',
|
||||
exitExpression: exit,
|
||||
props: props
|
||||
}, (e) => {
|
||||
if (e.state === 'end' || e.state === 'exit') {
|
||||
this.x = type ? -endWidth : 0
|
||||
this.isInAnimation = false;
|
||||
|
||||
this.isopen = this.isopen || false
|
||||
if (this.isopen !== type) {
|
||||
this.$emit('change', type)
|
||||
}
|
||||
this.isopen = type
|
||||
this.isDrag = false
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 绑定 BindingX
|
||||
* @param {Object} anchor
|
||||
* @param {Object} props
|
||||
* @param {Object} fn
|
||||
*/
|
||||
_bind(anchor, props, eventType, fn) {
|
||||
return BindingX.bind({
|
||||
anchor,
|
||||
eventType,
|
||||
props
|
||||
}, (e) => {
|
||||
typeof(fn) === 'function' && fn(e)
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 获取ref
|
||||
* @param {Object} el
|
||||
*/
|
||||
getEl(el) {
|
||||
return el.ref
|
||||
},
|
||||
/**
|
||||
* 获取节点信息
|
||||
*/
|
||||
getSelectorQuery() {
|
||||
dom.getComponentRect(this.$refs['selector-content-hock'], (data) => {
|
||||
if (this.position.content) return
|
||||
this.position.content = data.size
|
||||
})
|
||||
for (let i = 0; i < this.options.length; i++) {
|
||||
dom.getComponentRect(this.$refs['button-hock'][i], (data) => {
|
||||
if (!this.button) {
|
||||
this.button = []
|
||||
}
|
||||
if (this.options.length === this.button.length) return
|
||||
this.button.push(data.size)
|
||||
this.right += data.size.width
|
||||
if (this.autoClose) return
|
||||
if (this.show) {
|
||||
this.open()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user