gxd-uni-library-editx 1.0.0

package/src/components/swipeActionItem/UniSwipeActionItem.vue

@@ -0,0 +1,386 @@
+<template>
+	<!-- 在微信小程序 app vue端 h5 使用wxs 实现-->
+	<!-- #ifdef APP-VUE || MP-WEIXIN || H5 -->
+	<view class="uni-swipe">
+		<view
+		    class="uni-swipe_box"
+		    :data-threshold="threshold"
+		    :data-disabled="disabled"
+		    :change:prop="swipe.sizeReady"
+		    :prop="btn"
+		    @touchstart="swipe.touchstart"
+		    @touchmove="swipe.touchmove"
+		    @touchend="swipe.touchend"
+				@mousedown="swipe.mousedown"
+				@mousemove="swipe.mousemove"
+				@mouseup="swipe.mouseup"
+				@mouseleave="swipe.mouseleave"
+		>
+			<!-- 在微信小程序 app vue端 h5 使用wxs 实现-->
+			<view class="uni-swipe_button-group button-group--left">
+				<slot name="left">
+					<view
+					    v-for="(item,index) in leftOptions"
+					    :data-button="btn"
+					    :key="index"
+					    :style="{
+					  backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
+					  fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
+					}"
+					    class="uni-swipe_button button-hock"
+					    @touchstart="appTouchStart"
+					    @touchend="appTouchEnd($event,index,item,'left')"
+							@click.stop="onClickForPC(index,item,'left')"
+					><text
+						    class="uni-swipe_button-text"
+						    :style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}"
+						>{{ item.text }}</text></view>
+				</slot>
+			</view>
+			<view class="uni-swipe_text--center">
+				<slot></slot>
+			</view>
+			<view class="uni-swipe_button-group button-group--right">
+				<slot name="right">
+					<view
+					    v-for="(item,index) in rightOptions"
+					    :data-button="btn"
+					    :key="index"
+					    :style="{
+					  backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
+					  fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
+					}"
+					    class="uni-swipe_button button-hock"
+					    @touchstart="appTouchStart"
+					    @touchend="appTouchEnd($event,index,item,'right')"
+							@click.stop="onClickForPC(index,item,'right')"
+					><text
+						    class="uni-swipe_button-text"
+						    :style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}"
+						>{{ item.text }}</text></view>
+				</slot>
+			</view>
+		</view>
+	</view>
+	<!-- #endif -->
+	<!-- app nvue端 使用 bindingx -->
+	<!-- #ifdef APP-NVUE -->
+	<view
+	    ref="selector-box--hock"
+	    class="uni-swipe"
+	    @horizontalpan="touchstart"
+	    @touchend="touchend"
+	>
+		<view
+		    ref='selector-left-button--hock'
+		    class="uni-swipe_button-group button-group--left"
+		>
+			<slot name="left">
+				<view
+				    v-for="(item,index) in leftOptions"
+				    :data-button="btn"
+				    :key="index"
+				    :style="{
+				  backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
+				  fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
+				}"
+				    class="uni-swipe_button button-hock"
+				    @click.stop="onClick(index,item,'left')"
+				><text
+					    class="uni-swipe_button-text"
+					    :style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}"
+					>{{ item.text }}</text></view>
+			</slot>
+		</view>
+		<view
+		    ref='selector-right-button--hock'
+		    class="uni-swipe_button-group button-group--right"
+		>
+			<slot name="right">
+				<view
+				    v-for="(item,index) in rightOptions"
+				    :data-button="btn"
+				    :key="index"
+				    :style="{
+				  backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
+				  fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
+				}"
+				    class="uni-swipe_button button-hock"
+				    @click.stop="onClick(index,item,'right')"
+				><text
+					    class="uni-swipe_button-text"
+					    :style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}"
+					>{{ item.text }}</text></view>
+			</slot>
+		</view>
+		<view
+		    ref='selector-content--hock'
+		    class="uni-swipe_box"
+		>
+			<slot></slot>
+		</view>
+	</view>
+	<!-- #endif -->
+	<!-- 其他平台使用 js ，长列表性能可能会有影响-->
+	<!-- #ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ -->
+	<view class="uni-swipe">
+		<view
+		    class="uni-swipe_box"
+		    @touchstart="touchstart"
+		    @touchmove="touchmove"
+		    @touchend="touchend"
+		    :style="{transform:moveLeft}"
+		    :class="{ani:ani}"
+		>
+			<view class="uni-swipe_button-group button-group--left">
+				<slot name="left">
+					<view
+					    v-for="(item,index) in leftOptions"
+					    :data-button="btn"
+					    :key="index"
+					    :style="{
+					  backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
+					  fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
+					}"
+					    class="uni-swipe_button button-hock"
+					    @touchstart="appTouchStart"
+					    @touchend="appTouchEnd($event,index,item,'left')"
+					><text
+						    class="uni-swipe_button-text"
+						    :style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}"
+						>{{ item.text }}</text></view>
+				</slot>
+			</view>
+			<slot></slot>
+			<view class="uni-swipe_button-group button-group--right">
+				<slot name="right">
+					<view
+					    v-for="(item,index) in rightOptions"
+					    :data-button="btn"
+					    :key="index"
+					    :style="{
+					  backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
+					  fontSize: item.style && item.style.fontSize ? item.style.fontSize : '32px',
+					}"
+					    @touchstart="appTouchStart"
+					    @touchend="appTouchEnd($event,index,item,'right')"
+					    class="uni-swipe_button button-hock"
+					><text
+						    class="uni-swipe_button-text"
+						    :style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}"
+						>{{ item.text }}</text></view>
+				</slot>
+			</view>
+		</view>
+	</view>
+	<!-- #endif -->
+
+</template>
+<script
+    src="./index.wxs"
+    module="swipe"
+    lang="wxs"
+></script>
+
+
+<script>
+	// #ifdef APP-VUE|| MP-WEIXIN || H5
+	import mpwxs from './mpwxs'
+	// #endif
+
+	// #ifdef APP-NVUE
+	import bindingx from './bindingx.js'
+	// #endif
+
+	// #ifndef APP-PLUS|| MP-WEIXIN  ||  H5
+	import mixins from './mpother'
+	// #endif
+
+	/**
+	 * SwipeActionItem 滑动操作子组件
+	 * @description 通过滑动触发选项的容器
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=181
+	 * @property {Boolean} show = [left|right｜none] 	开启关闭组件，auto-close = false 时生效
+	 * @property {Boolean} disabled = [true|false] 		是否禁止滑动
+	 * @property {Boolean} autoClose = [true|false] 	滑动打开当前组件，是否关闭其他组件
+	 * @property {Number}  threshold 					滑动缺省值
+	 * @property {Array} leftOptions 					左侧选项内容及样式
+	 * @property {Array} rgihtOptions 					右侧选项内容及样式
+	 * @event {Function} click 							点击选项按钮时触发事件，e = {content,index} ，content（点击内容）、index（下标)
+	 * @event {Function} change 						组件打开或关闭时触发，left\right\none
+	 */
+
+	export default {
+	  name:'UniSwipeActionItem',
+		// #ifdef APP-VUE|| MP-WEIXIN||H5
+		mixins: [mpwxs],
+		// #endif
+
+		// #ifdef APP-NVUE
+		mixins: [bindingx],
+		// #endif
+
+		// #ifndef APP-PLUS|| MP-WEIXIN ||  H5
+		mixins: [mixins],
+		// #endif
+
+		props: {
+			// 控制开关
+			show: {
+				type: String,
+				default: 'none'
+			},
+
+			// 禁用
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+
+			// 是否自动关闭
+			autoClose: {
+				type: Boolean,
+				default: true
+			},
+
+			// 滑动缺省距离
+			threshold: {
+				type: Number,
+				default: 20
+			},
+
+			// 左侧按钮内容
+			leftOptions: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+
+			// 右侧按钮内容
+			rightOptions: {
+				type: Array,
+				default () {
+					return []
+				}
+			}
+
+		},
+		inject: ['swipeaction']
+	}
+</script>
+<style
+    lang="less"
+    scoped
+>
+	.uni-swipe {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		overflow: hidden;
+		/* #endif */
+	}
+
+	.uni-swipe_box {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		flex-shrink: 0;
+		/* #endif */
+		position: relative;
+	}
+
+	.uni-swipe_content {
+		// border: 1px red solid;
+	}
+
+	.uni-swipe_text--center {
+		width:100%;
+    /*margin-right: unit(10, rpx);*/
+    cursor: grab;
+	}
+
+	.uni-swipe_button-group {
+		/* #ifndef APP-NVUE */
+		box-sizing: border-box;
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.button-group--left {
+		left: 0;
+		transform: translateX(-100%)
+	}
+
+	.button-group--right {
+		right: 0;
+		transform: translateX(100%)
+	}
+
+	.uni-swipe_button {
+		/* #ifdef APP-NVUE */
+		flex: 1;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		padding: 0 unit(20,rpx);
+    min-width: unit(100,rpx);
+	}
+
+	.uni-swipe_button-text {
+		/* #ifndef APP-NVUE */
+		flex-shrink: 0;
+		/* #endif */
+		font-size: unit(28, rpx);
+	}
+
+	.ani {
+		transition-property: transform;
+		transition-duration: 0.3s;
+		transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
+	}
+
+	/* #ifdef MP-ALIPAY */
+	.movable-area {
+		/* width: 100%; */
+		height: unit(90,rpx);
+	}
+
+	.movable-view {
+		display: flex;
+		/* justify-content: center; */
+		position: relative;
+		flex: 1;
+		height: unit(90, rpx);
+		z-index: 2;
+	}
+
+	.movable-view-button {
+		display: flex;
+		flex-shrink: 0;
+		flex-direction: row;
+		height: 100%;
+		background: #C0C0C0;
+	}
+
+	/* .transition {
+		transition: all 0.3s;
+	} */
+
+	.movable-view-box {
+		flex-shrink: 0;
+		height: 100%;
+		background-color: #fff;
+	}
+
+	/* #endif */
+</style>

package/src/components/swipeActionItem/bindingx.js

@@ -0,0 +1,298 @@
+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()
+			}
+		},
+		leftOptions() {
+			this.getSelectorQuery()
+			this.init()
+		},
+		rightOptions(newVal) {
+			this.init()
+		}
+	},
+	created() {
+		if (this.swipeaction.children !== undefined) {
+			this.swipeaction.children.push(this)
+		}
+	},
+	mounted() {
+	  this.$nextTick(()=>{
+      this.box = this.getEl(this.$refs['selector-box--hock'])
+      this.selector = this.getEl(this.$refs['selector-content--hock']);
+      this.leftButton = this.getEl(this.$refs['selector-left-button--hock']);
+      this.rightButton = this.getEl(this.$refs['selector-right-button--hock']);
+      this.init()
+    });
+
+	},
+	beforeDestroy() {
+		this.swipeaction.children.forEach((item, index) => {
+			if (item === this) {
+				this.swipeaction.children.splice(index, 1)
+			}
+		})
+	},
+	methods: {
+		init() {
+      this.x = 0
+      this.button = {
+        show: false
+      }
+      this.$nextTick(()=>{
+        setTimeout(() => {
+          this.getSelectorQuery()
+        }, 200)
+      });
+
+
+		},
+		onClick(index, item, position) {
+			this.$emit('click', {
+				content: item,
+				index,
+				position
+			})
+		},
+		touchstart(e) {
+			// 每次只触发一次，避免多次监听造成闪烁
+			if (this.stop) return
+			this.stop = true
+			if (this.autoClose) {
+				this.swipeaction.closeOther(this)
+			}
+
+			const leftWidth = this.button.left.width
+			const rightWidth = this.button.right.width
+			let expression = this.range(this.x, -rightWidth, leftWidth)
+			let leftExpression = this.range(this.x - leftWidth, -leftWidth, 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.leftButton,
+					property: 'transform.translateX',
+					expression: leftExpression
+				}, {
+					element: this.rightButton,
+					property: 'transform.translateX',
+					expression: rightExpression
+				}, ]
+			}, (e) => {
+				// nope
+				if (e.state === 'end') {
+					this.x = e.deltaX + this.x;
+					this.isclick = true
+					this.bindTiming(e.deltaX)
+				}
+			});
+		},
+		touchend(e) {
+			if (this.isopen !== 'none' && !this.isclick) {
+				this.open('none')
+			}
+		},
+		bindTiming(x) {
+			const left = this.x
+			const leftWidth = this.button.left.width
+			const rightWidth = this.button.right.width
+			const threshold = this.threshold
+			if (!this.isopen || this.isopen === 'none') {
+				if (left > threshold) {
+					this.open('left')
+				} else if (left < -threshold) {
+					this.open('right')
+				} else {
+					this.open('none')
+				}
+			} else {
+				if ((x > -leftWidth && x < 0) || x > rightWidth) {
+					if ((x > -threshold && x < 0) || (x - rightWidth > threshold)) {
+						this.open('left')
+					} else {
+						this.open('none')
+					}
+				} else {
+					if ((x < threshold && x > 0) || (x + leftWidth < -threshold)) {
+						this.open('right')
+					} else {
+						this.open('none')
+					}
+				}
+			}
+		},
+
+		/**
+		 * 移动范围
+		 * @param {Object} num
+		 * @param {Object} mix
+		 * @param {Object} max
+		 */
+		range(num, mix, max) {
+			return `min(max(x+${num}, ${mix}), ${max})`
+		},
+
+		/**
+		 * 开启swipe
+		 */
+		open(type) {
+			this.animation(type)
+		},
+
+		/**
+		 * 关闭swipe
+		 */
+		close() {
+			this.animation('none')
+		},
+
+		/**
+		 * 开启关闭动画
+		 * @param {Object} type
+		 */
+		animation(type) {
+			const time = 300
+			const leftWidth = this.button.left.width
+			const rightWidth = this.button.right.width
+			if (this.eventpan && this.eventpan.token) {
+				BindingX.unbind({
+					token: this.eventpan.token,
+					eventType: 'pan'
+				})
+			}
+
+			switch (type) {
+				case 'left':
+					Promise.all([
+						this.move(this.selector, leftWidth),
+						this.move(this.leftButton, 0),
+						this.move(this.rightButton, rightWidth * 2)
+					]).then(() => {
+						this.setEmit(leftWidth, type)
+					})
+					break
+				case 'right':
+					Promise.all([
+						this.move(this.selector, -rightWidth),
+						this.move(this.leftButton, -leftWidth * 2),
+						this.move(this.rightButton, 0)
+					]).then(() => {
+						this.setEmit(-rightWidth, type)
+					})
+					break
+				default:
+					Promise.all([
+						this.move(this.selector, 0),
+						this.move(this.leftButton, -leftWidth),
+						this.move(this.rightButton, rightWidth)
+					]).then(() => {
+						this.setEmit(0, type)
+					})
+
+			}
+		},
+		setEmit(x, type) {
+			const leftWidth = this.button.left.width
+			const rightWidth = this.button.right.width
+			this.isopen = this.isopen || 'none'
+			this.stop = false
+			this.isclick = false
+			// 只有状态不一致才会返回结果
+			if (this.isopen !== type && this.x !== x) {
+				if (type === 'left' && leftWidth > 0) {
+					this.$emit('change', 'left')
+				}
+				if (type === 'right' && rightWidth > 0) {
+					this.$emit('change', 'right')
+				}
+				if (type === 'none') {
+					this.$emit('change', 'none')
+				}
+			}
+			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)
+				})
+			})
+
+		},
+
+		/**
+		 * 获取ref
+		 * @param {Object} el
+		 */
+		getEl(el) {
+			return el.ref
+		},
+		/**
+		 * 获取节点信息
+		 */
+		getSelectorQuery() {
+			Promise.all([
+				this.getDom('left'),
+				this.getDom('right'),
+			]).then((data) => {
+				let show = 'none'
+				if (this.autoClose) {
+					show = 'none'
+				} else {
+					show = this.show
+				}
+
+				if (show === 'none') {
+					// this.close()
+				} else {
+					this.open(show)
+				}
+
+			})
+
+		},
+		getDom(str) {
+			return new Promise((resolve, reject) => {
+				dom.getComponentRect(this.$refs[`selector-${str}-button--hock`], (data) => {
+					if (data) {
+						this.button[str] = data.size
+						resolve(data)
+					} else {
+						reject()
+					}
+				})
+			})
+		}
+	}
+}