feat: 首次提交
This commit is contained in:
peerless_hero
226
components/firstui/fui-swipe-action/bindingx.js
Normal file
226
components/firstui/fui-swipe-action/bindingx.js
Normal file
@ -0,0 +1,226 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1861 4 07 2 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
// #ifdef APP-NVUE
|
||||
const BindingX = uni.requireNativePlugin('bindingx');
|
||||
const dom = uni.requireNativePlugin('dom');
|
||||
const animation = uni.requireNativePlugin('animation');
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
watch: {
|
||||
show(newVal) {
|
||||
// if (this.autoClose) return
|
||||
if (this.stop) return
|
||||
this.stop = true
|
||||
if (newVal) {
|
||||
this.open(newVal)
|
||||
} else {
|
||||
this.close()
|
||||
}
|
||||
},
|
||||
buttons(newVal) {
|
||||
this.init()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.group = this.getParent()
|
||||
if (this.group.children !== undefined) {
|
||||
this.group.children.push(this)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(()=>{
|
||||
this.box = this.getEl(this.$refs['fui_swipea_wrap'])
|
||||
this.selector = this.getEl(this.$refs['fui_swipea_content']);
|
||||
this.rightButton = this.getEl(this.$refs['fui_swipea_buttons']);
|
||||
})
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.$nextTick(() => {
|
||||
this.x = 0
|
||||
this.button = {
|
||||
show: false
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.getSelectorQuery()
|
||||
}, 200)
|
||||
})
|
||||
},
|
||||
handleClick(e, index, item) {
|
||||
e.stopPropagation();
|
||||
this.$emit('click', {
|
||||
item,
|
||||
index,
|
||||
param: this.param
|
||||
})
|
||||
},
|
||||
touchstart(e) {
|
||||
if (this.disabled) return
|
||||
// 每次只触发一次，避免多次监听造成闪烁
|
||||
if (this.stop) return
|
||||
this.stop = true
|
||||
if (this.autoClose) {
|
||||
this.group && this.group.closeAuto(this)
|
||||
}
|
||||
|
||||
const rightWidth = this.button.right.width || 0
|
||||
let expression = this.range(this.x, -rightWidth, 0)
|
||||
let rightExpression = this.range(this.x + rightWidth, 0, rightWidth)
|
||||
|
||||
this.eventpan = BindingX.bind({
|
||||
anchor: this.box,
|
||||
eventType: 'pan',
|
||||
props: [{
|
||||
element: this.selector,
|
||||
property: 'transform.translateX',
|
||||
expression
|
||||
}, {
|
||||
element: this.rightButton,
|
||||
property: 'transform.translateX',
|
||||
expression: rightExpression
|
||||
}]
|
||||
}, (e) => {
|
||||
if (e.state === 'end') {
|
||||
this.x = e.deltaX + this.x;
|
||||
this.isclick = true
|
||||
this.bindTiming(e.deltaX)
|
||||
}
|
||||
});
|
||||
},
|
||||
touchend(e) {
|
||||
if (this.isopen && !this.isclick) {
|
||||
this.open(false)
|
||||
}
|
||||
},
|
||||
bindTiming(x) {
|
||||
const left = this.x
|
||||
const rightWidth = this.button.right.width || 0
|
||||
const threshold = Number(this.threshold)
|
||||
if (!this.isopen) {
|
||||
if (left < -threshold) {
|
||||
this.open(true)
|
||||
} else {
|
||||
this.open(false)
|
||||
}
|
||||
} else {
|
||||
if ((x < threshold && x > 0) || (x < -threshold)) {
|
||||
this.open(true)
|
||||
} else {
|
||||
this.open(false)
|
||||
}
|
||||
}
|
||||
},
|
||||
range(num, mix, max) {
|
||||
return `min(max(x+${num}, ${mix}), ${max})`
|
||||
},
|
||||
open(type) {
|
||||
this.animation(type)
|
||||
},
|
||||
close() {
|
||||
this.animation(false)
|
||||
},
|
||||
animation(type) {
|
||||
const time = 300
|
||||
const rightWidth = this.button.right.width || 0
|
||||
if (this.eventpan && this.eventpan.token) {
|
||||
BindingX.unbind({
|
||||
token: this.eventpan.token,
|
||||
eventType: 'pan'
|
||||
})
|
||||
}
|
||||
|
||||
if (type) {
|
||||
Promise.all([
|
||||
this.move(this.selector, -rightWidth),
|
||||
this.move(this.rightButton, 0)
|
||||
]).then(() => {
|
||||
this.setEmit(-rightWidth, type)
|
||||
})
|
||||
} else {
|
||||
Promise.all([
|
||||
this.move(this.selector, 0),
|
||||
this.move(this.rightButton, rightWidth)
|
||||
]).then(() => {
|
||||
this.setEmit(0, type)
|
||||
})
|
||||
}
|
||||
},
|
||||
setEmit(x, type) {
|
||||
const rightWidth = this.button.right.width
|
||||
this.isopen = this.isopen || false
|
||||
this.stop = false
|
||||
this.isclick = false
|
||||
if (this.isopen !== type && this.x !== x) {
|
||||
if (type && rightWidth > 0) {
|
||||
this.$emit('change', {
|
||||
isOpen: true,
|
||||
param: this.param
|
||||
})
|
||||
}
|
||||
if (!type) {
|
||||
this.$emit('change', {
|
||||
isOpen: false,
|
||||
param: this.param
|
||||
})
|
||||
}
|
||||
}
|
||||
this.x = x
|
||||
this.isopen = type
|
||||
},
|
||||
move(ref, value) {
|
||||
return new Promise((resolve, reject) => {
|
||||
animation.transition(ref, {
|
||||
styles: {
|
||||
transform: `translateX(${value})`,
|
||||
},
|
||||
duration: 150, //ms
|
||||
timingFunction: 'linear',
|
||||
needLayout: false,
|
||||
delay: 0 //ms
|
||||
}, function(res) {
|
||||
resolve(res)
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
getEl(el) {
|
||||
return el.ref
|
||||
},
|
||||
getSelectorQuery() {
|
||||
Promise.all([
|
||||
this.getDom(),
|
||||
]).then((data) => {
|
||||
// let show = false
|
||||
// if (!this.autoClose) {
|
||||
// show = this.show
|
||||
// }
|
||||
// if (show) {
|
||||
// this.open(show)
|
||||
// }
|
||||
this.open(this.show)
|
||||
})
|
||||
|
||||
},
|
||||
getDom() {
|
||||
return new Promise((resolve, reject) => {
|
||||
dom.getComponentRect(this.$refs['fui_swipea_buttons'], (data) => {
|
||||
if (data) {
|
||||
this.button['right'] = data.size
|
||||
resolve(data)
|
||||
} else {
|
||||
reject()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// #endif
|
||||
|
||||
// #ifndef APP-NVUE
|
||||
export default {}
|
||||
// #endif
|
||||
Reference in New Issue
Block a user