123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174 |
- const dom = uni.requireNativePlugin('dom');
- const bindingX = uni.requireNativePlugin('bindingx');
- const animation = uni.requireNativePlugin('animation');
- export default {
- data() {
- return {
-
- buttonsWidth: 0,
-
- moving: false
- }
- },
- computed: {
-
- getDuratin() {
- let duration = String(this.duration)
-
- if (duration.indexOf('ms') >= 0) return parseInt(duration)
-
- if (duration.indexOf('s') >= 0) return parseInt(duration) * 1000
-
- duration = Number(duration)
- return duration < 30 ? duration * 1000 : duration
- }
- },
- watch: {
- show(n) {
- if(n) {
- this.moveCellByAnimation('open')
- } else {
- this.moveCellByAnimation('close')
- }
- }
- },
- mounted() {
- this.initialize()
- },
- methods: {
- initialize() {
- this.queryRect()
- },
-
- closeHandler() {
- if(this.status === 'open') {
-
- return this.moveCellByAnimation('close') && this.unbindBindingX()
- }
- },
-
- clickHandler() {
-
- if(this.moving) return
-
- this.parent && this.parent.closeOther(this)
- if(this.status === 'open') {
-
- return this.moveCellByAnimation('close') && this.unbindBindingX()
- }
- },
-
- onTouchstart(e) {
-
- if(this.moving || this.disabled) {
- return this.unbindBindingX()
- }
- if(this.status === 'open') {
-
- return this.moveCellByAnimation('close') && this.unbindBindingX()
- }
-
- e?.stopPropagation && e.stopPropagation()
- e?.preventDefault && e.preventDefault()
- this.moving = true
-
- const content = this.getContentRef()
- let expression = `min(max(${-this.buttonsWidth}, x), 0)`
-
- this.parent && this.parent.closeOther(this)
-
-
- this.panEvent = bindingX.bind({
- anchor: content,
- eventType: 'pan',
- props: [{
- element: content,
-
- property: 'transform.translateX',
- expression
- }]
- }, (res) => {
- this.moving = false
- if (res.state === 'end' || res.state === 'exit') {
- const deltaX = res.deltaX
- if(deltaX <= -this.buttonsWidth || deltaX >= 0) {
-
-
- this.$nextTick(() => {
- this.status = deltaX <= -this.buttonsWidth ? 'open' : 'close'
- })
- } else if(Math.abs(deltaX) > uni.$u.getPx(this.threshold)) {
-
-
- if(Math.abs(deltaX) < this.buttonsWidth) {
- this.moveCellByAnimation(deltaX > 0 ? 'close' : 'open')
- }
- } else {
-
- this.moveCellByAnimation('close')
- }
- }
- })
- },
-
- unbindBindingX() {
-
- if (this?.panEvent?.token != 0) {
- bindingX.unbind({
- token: this.panEvent?.token,
-
- eventType: 'pan'
- })
- }
- },
-
- queryRect() {
-
- const promiseAll = this.options.map((item, index) => {
- return this.getRectByDom(this.$refs[`u-swipe-action-item__right__button-${index}`][0])
- })
-
- Promise.all(promiseAll).then(sizes => {
- this.buttons = sizes
-
- this.buttonsWidth = sizes.reduce((sum, cur) => sum + cur.width, 0)
- })
- },
-
- getRectByDom(ref) {
- return new Promise(resolve => {
- dom.getComponentRect(ref, res => {
- resolve(res.size)
- })
- })
- },
-
- moveCellByAnimation(status = 'open') {
- if(this.moving) return
-
- this.moveing = true
- const content = this.getContentRef()
- const x = status === 'open' ? -this.buttonsWidth : 0
- animation.transition(content, {
- styles: {
- transform: `translateX(${x}px)`,
- },
- duration: uni.$u.getDuration(this.duration, false),
- timingFunction: 'ease-in-out'
- }, () => {
- this.moving = false
- this.status = status
- this.unbindBindingX()
- })
- },
-
- getContentRef() {
- return this.$refs['u-swipe-action-item__content'].ref
- },
- beforeDestroy() {
- this.unbindBindingX()
- }
- }
- }
|