1

uni_modules/uview-next/components/u-swipe-action-item/index.sjs

@@ -0,0 +1,217 @@
+/**
+ * 此为sjs模块，专门为支付宝小程序设计
+ * sjs语法与wxs基本相同，但有一些细微差别
+ */
+
+// 开始触摸
+function touchstart(event, ownerInstance) {
+    // 获取触发事件的组件实例
+    var instance = event.instance;
+    // 获取组件状态
+    var state = instance.getState();
+    if (state.disabled) return;
+    
+    var touches = event.touches;
+    // 如果是多指触控，不允许操作
+    if (touches && touches.length > 1) return;
+    
+    // 标识当前为滑动中状态
+    state.moving = true;
+    // 记录触摸开始点的坐标
+    state.startX = touches[0].pageX;
+    state.startY = touches[0].pageY;
+    
+    ownerInstance.callMethod('closeOther');
+}
+
+// 触摸滑动
+function touchmove(event, ownerInstance) {
+    var instance = event.instance;
+    var state = instance.getState();
+    if (state.disabled || !state.moving) return;
+    
+    var touches = event.touches;
+    var pageX = touches[0].pageX;
+    var pageY = touches[0].pageY;
+    var moveX = pageX - state.startX;
+    var moveY = pageY - state.startY;
+    var buttonsWidth = state.buttonsWidth;
+    
+    // 移动的X轴距离大于Y轴距离时，禁止页面滚动
+    if (Math.abs(moveX) > Math.abs(moveY) || Math.abs(moveX) > state.threshold) {
+        // 支付宝小程序阻止事件传播
+        if (event.preventDefault) {
+            event.preventDefault();
+        }
+        if (event.stopPropagation) {
+            event.stopPropagation();
+        }
+    }
+    
+    // 如果Y轴移动距离大于X轴，认为是上下滑动
+    if (Math.abs(moveX) < Math.abs(moveY)) return;
+    
+    // 限制滑动范围
+    if (state.status === 'open') {
+        // 开启状态下向左滑动需要忽略
+        if (moveX < 0) moveX = 0;
+        // 最大移动距离为按钮总宽度
+        if (moveX > buttonsWidth) moveX = buttonsWidth;
+        // 移动收起菜单
+        moveSwipeAction(-buttonsWidth + moveX, instance, ownerInstance);
+    } else {
+        // 关闭状态下右滑需要忽略
+        if (moveX > 0) moveX = 0;
+        // 限制最大滑动距离
+        if (Math.abs(moveX) > buttonsWidth) moveX = -buttonsWidth;
+        // 移动显示菜单
+        moveSwipeAction(moveX, instance, ownerInstance);
+    }
+}
+
+// 触摸结束
+function touchend(event, ownerInstance) {
+    var instance = event.instance;
+    var state = instance.getState();
+    if (!state.moving || state.disabled) return;
+    
+    var touches = event.changedTouches ? event.changedTouches[0] : {};
+    var pageX = touches.pageX;
+    var moveX = pageX - state.startX;
+    
+    if (state.status === 'open') {
+        // 展开状态下继续左滑无需操作
+        if (moveX < 0) return;
+        // 点击内容区域收起菜单
+        if (moveX === 0) {
+            return closeSwipeAction(instance, ownerInstance);
+        }
+        // 根据滑动距离决定是否关闭
+        if (Math.abs(moveX) < state.threshold) {
+            openSwipeAction(instance, ownerInstance);
+        } else {
+            closeSwipeAction(instance, ownerInstance);
+        }
+    } else {
+        // 关闭状态下右滑无需操作
+        if (moveX > 0) return;
+        // 根据滑动距离决定是否打开
+        if (Math.abs(moveX) < state.threshold) {
+            closeSwipeAction(instance, ownerInstance);
+        } else {
+            openSwipeAction(instance, ownerInstance);
+        }
+    }
+}
+
+// 获取过渡时间
+function getDuration(value) {
+    if (value.toString().indexOf('s') >= 0) return value;
+    return value > 30 ? value + 'ms' : value + 's';
+}
+
+// 移动滑动选择器内容区域
+function moveSwipeAction(moveX, instance, ownerInstance) {
+    var state = instance.getState();
+    // 支付宝小程序获取按钮实例
+    var buttons = ownerInstance.selectAllComponents('.u-swipe-action-item__right__button');
+    
+    // 设置内容部分的偏移
+    instance.requestAnimationFrame(function() {
+        instance.setStyle({
+            transition: 'none',
+            transform: 'translateX(' + moveX + 'px)',
+            '-webkit-transform': 'translateX(' + moveX + 'px)'
+        });
+    });
+}
+
+// 展开滑动菜单
+function openSwipeAction(instance, ownerInstance) {
+    var state = instance.getState();
+    var buttons = ownerInstance.selectAllComponents('.u-swipe-action-item__right__button');
+    var duration = getDuration(state.duration);
+    var buttonsWidth = -state.buttonsWidth;
+    
+    instance.requestAnimationFrame(function() {
+        instance.setStyle({
+            transition: 'transform ' + duration,
+            transform: 'translateX(' + buttonsWidth + 'px)',
+            '-webkit-transform': 'translateX(' + buttonsWidth + 'px)'
+        });
+    });
+    setStatus('open', instance, ownerInstance);
+}
+
+// 设置菜单状态
+function setStatus(status, instance, ownerInstance) {
+    var state = instance.getState();
+    state.status = status;
+    ownerInstance.callMethod('setState', status);
+}
+
+// 收起滑动菜单
+function closeSwipeAction(instance, ownerInstance) {
+    var state = instance.getState();
+    var buttons = ownerInstance.selectAllComponents('.u-swipe-action-item__right__button');
+    var len = buttons.length;
+    var duration = getDuration(state.duration);
+    
+    instance.requestAnimationFrame(function() {
+        // 设置菜单主体内容
+        instance.setStyle({
+            transition: 'transform ' + duration,
+            transform: 'translateX(0px)',
+            '-webkit-transform': 'translateX(0px)'
+        });
+        // 设置按钮为收起状态
+        for (var i = len - 1; i >= 0; i--) {
+            buttons[i].setStyle({
+                transition: 'transform ' + duration,
+                transform: 'translateX(0px)',
+                '-webkit-transform': 'translateX(0px)'
+            });
+        }
+    });
+    setStatus('close', instance, ownerInstance);
+}
+
+// status状态变化处理
+function statusChange(newValue, oldValue, ownerInstance, instance) {
+    var state = instance.getState();
+    if (state.disabled) return;
+    
+    if (newValue === 'close' && state.status === 'open') {
+        closeSwipeAction(instance, ownerInstance);
+    } else if (newValue === 'open' && state.status === 'close') {
+        openSwipeAction(instance, ownerInstance);
+    }
+}
+
+// 菜单尺寸变化处理
+function sizeChange(newValue, oldValue, ownerInstance, instance) {
+    var state = instance.getState();
+    state.disabled = newValue.disabled;
+    state.duration = newValue.duration;
+    state.show = newValue.show;
+    state.threshold = newValue.threshold;
+    state.buttons = newValue.buttons;
+    
+    if (state.buttons) {
+        var len = state.buttons.length;
+        var buttonsWidth = 0;
+        var buttons = newValue.buttons;
+        for (var i = 0; i < len; i++) {
+            buttonsWidth += buttons[i].width;
+        }
+        state.buttonsWidth = buttonsWidth;
+    }
+}
+
+export default {
+    touchstart,
+    touchmove,
+    touchend,
+    statusChange,
+    sizeChange
+};

uni_modules/uview-next/components/u-swipe-action-item/index.wxs

@@ -0,0 +1,225 @@
+/**
+ * 此为wxs模块，只支持APP-VUE，微信和QQ小程序以及H5平台
+ * wxs内部不支持es6语法，变量只能使用var定义，无法使用解构，箭头函数等特性
+ */
+
+// 开始触摸
+function touchstart(event, ownerInstance) {
+	// 触发事件的组件的ComponentDescriptor实例
+	var instance = event.instance;
+	// wxs内的局部变量快照，此快照是属于整个组件的，在touchstart和touchmove事件中都能获取到相同的结果
+	var state = instance.getState();
+	if (state.disabled) return;
+	var touches = event.touches;
+	// 如果进行的是多指触控，不允许进行操作
+	if (touches && touches.length > 1) return;
+	// 标识当前为滑动中状态
+	state.moving = true;
+	// 记录触摸开始点的坐标值
+	state.startX = touches[0].pageX;
+	state.startY = touches[0].pageY;
+
+	ownerInstance.callMethod('closeOther');
+}
+
+// 触摸滑动
+function touchmove(event, ownerInstance) {
+	// 触发事件的组件的ComponentDescriptor实例
+	var instance = event.instance;
+	// wxs内的局部变量快照
+	var state = instance.getState();
+	if (state.disabled || !state.moving) return;
+	var touches = event.touches;
+	var pageX = touches[0].pageX;
+	var pageY = touches[0].pageY;
+	var moveX = pageX - state.startX;
+	var moveY = pageY - state.startY;
+	var buttonsWidth = state.buttonsWidth;
+
+	// 移动的X轴距离大于Y轴距离，也即终点与起点位置连线，与X轴夹角小于45度时，禁止页面滚动
+	if (Math.abs(moveX) > Math.abs(moveY) || Math.abs(moveX) > state.threshold) {
+		event.preventDefault && event.preventDefault();
+		event.stopPropagation && event.stopPropagation();
+	}
+	// 如果移动的X轴距离小于Y轴距离，也即终点位置与起点位置连线，与Y轴夹角小于45度时，认为是页面上下滑动，而不是左右滑动单元格
+	if (Math.abs(moveX) < Math.abs(moveY)) return;
+
+	// 限制右滑的距离，不允许内容部分往右偏移，右滑会导致X轴偏移值大于0，以此做判断
+	// 此处不能直接return，因为滑动过程中会缺失某些关键点坐标，会导致错乱，最好的办法就是
+	// 在超出后，设置为0
+	if (state.status === 'open') {
+		// 在开启状态下，向左滑动，需忽略
+		if (moveX < 0) moveX = 0;
+		// 想要收起菜单，最大能移动的距离为按钮的总宽度
+		if (moveX > buttonsWidth) moveX = buttonsWidth;
+		// 如果是已经打开了的状态，向左滑动时，移动收起菜单
+		moveSwipeAction(-buttonsWidth + moveX, instance, ownerInstance);
+	} else {
+		// 关闭状态下，右滑动需忽略
+		if (moveX > 0) moveX = 0;
+		// 滑动的距离不允许超过所有按钮的总宽度，此时只能是左滑，最终设置按钮的总宽度，同时为负数
+		if (Math.abs(moveX) > buttonsWidth) moveX = -buttonsWidth;
+		// 只要是在滑过程中，就不断移动单元格内容部分，从而使隐藏的菜单显示出来
+		moveSwipeAction(moveX, instance, ownerInstance);
+	}
+}
+
+// 触摸结束
+function touchend(event, ownerInstance) {
+	// 触发事件的组件的ComponentDescriptor实例
+	var instance = event.instance;
+	// wxs内的局部变量快照
+	var state = instance.getState();
+	if (!state.moving || state.disabled) return;
+	var touches = event.changedTouches ? event.changedTouches[0] : {};
+	var pageX = touches.pageX;
+	var pageY = touches.pageY;
+	var moveX = pageX - state.startX;
+	if (state.status === 'open') {
+		// 在展开的状态下，继续左滑，无需操作
+		if (moveX < 0) return;
+		// 在开启状态下，点击一下内容区域，moveX为0，也即没有进行移动，这时执行收起菜单逻辑
+		if (moveX === 0) {
+			return closeSwipeAction(instance, ownerInstance);
+		}
+		// 在开启状态下，滑动距离小于阈值，则默认为不关闭，同时恢复原来的打开状态
+		if (Math.abs(moveX) < state.threshold) {
+			openSwipeAction(instance, ownerInstance);
+		} else {
+			// 如果滑动距离大于阈值，则执行收起逻辑
+			closeSwipeAction(instance, ownerInstance);
+		}
+	} else {
+		// 在关闭的状态下，右滑，无需操作
+		if (moveX > 0) return;
+		// 理由同上
+		if (Math.abs(moveX) < state.threshold) {
+			closeSwipeAction(instance, ownerInstance);
+		} else {
+			openSwipeAction(instance, ownerInstance);
+		}
+	}
+}
+
+// 获取过渡时间
+function getDuration(value) {
+	if (value.toString().indexOf('s') >= 0) return value;
+	return value > 30 ? value + 'ms' : value + 's';
+}
+
+// 滑动结束时判断滑动的方向
+function getMoveDirection(instance, ownerInstance) {
+	var state = instance.getState();
+}
+
+// 移动滑动选择器内容区域，同时显示出其隐藏的菜单
+function moveSwipeAction(moveX, instance, ownerInstance) {
+	var state = instance.getState();
+	// 获取所有按钮的实例，需要通过它去设置按钮的位移
+	var buttons = ownerInstance.selectAllComponents('.u-swipe-action-item__right__button');
+
+	// 设置菜单内容部分的偏移
+	instance.requestAnimationFrame(function () {
+		instance.setStyle({
+			// 设置translateX的值
+			transition: 'none',
+			transform: 'translateX(' + moveX + 'px)',
+			'-webkit-transform': 'translateX(' + moveX + 'px)'
+		});
+	});
+}
+
+// 一次性展开滑动菜单
+function openSwipeAction(instance, ownerInstance) {
+	var state = instance.getState();
+	// 获取所有按钮的实例，需要通过它去设置按钮的位移
+	var buttons = ownerInstance.selectAllComponents('.u-swipe-action-item__right__button');
+	// 处理duration单位问题
+	var duration = getDuration(state.duration);
+	// 展开过程中，是向左移动，所以X的偏移应该为负值
+	var buttonsWidth = -state.buttonsWidth;
+	instance.requestAnimationFrame(function () {
+		// 设置菜单主体内容
+		instance.setStyle({
+			transition: 'transform ' + duration,
+			transform: 'translateX(' + buttonsWidth + 'px)',
+			'-webkit-transform': 'translateX(' + buttonsWidth + 'px)'
+		});
+	});
+	setStatus('open', instance, ownerInstance);
+}
+
+// 标记菜单的当前状态，open-已经打开，close-已经关闭
+function setStatus(status, instance, ownerInstance) {
+	var state = instance.getState();
+	state.status = status;
+	ownerInstance.callMethod('setState', status);
+}
+
+// 一次性收起滑动菜单
+function closeSwipeAction(instance, ownerInstance) {
+	var state = instance.getState();
+	// 获取所有按钮的实例，需要通过它去设置按钮的位移
+	var buttons = ownerInstance.selectAllComponents('.u-swipe-action-item__right__button');
+	var len = buttons.length;
+	// 处理duration单位问题
+	var duration = getDuration(state.duration);
+	instance.requestAnimationFrame(function () {
+		// 设置菜单主体内容
+		instance.setStyle({
+			transition: 'transform ' + duration,
+			transform: 'translateX(0px)',
+			'-webkit-transform': 'translateX(0px)'
+		});
+		// 设置各个隐藏的按钮为收起的状态
+		for (var i = len - 1; i >= 0; i--) {
+			buttons[i].setStyle({
+				transition: 'transform ' + duration,
+				transform: 'translateX(0px)',
+				'-webkit-transform': 'translateX(0px)'
+			});
+		}
+	});
+	setStatus('close', instance, ownerInstance);
+}
+
+// status的状态发生变化
+function statusChange(newValue, oldValue, ownerInstance, instance) {
+	var state = instance.getState();
+	if (state.disabled) return;
+	// 打开或关闭单元格
+	if (newValue === 'close' && state.status === 'open') {
+		closeSwipeAction(instance, ownerInstance);
+	} else if (newValue === 'open' && state.status === 'close') {
+		openSwipeAction(instance, ownerInstance);
+	}
+}
+
+// 菜单尺寸发生变化
+function sizeChange(newValue, oldValue, ownerInstance, instance) {
+	// wxs内的局部变量快照
+	var state = instance.getState();
+	state.disabled = newValue.disabled;
+	state.duration = newValue.duration;
+	state.show = newValue.show;
+	state.threshold = newValue.threshold;
+	state.buttons = newValue.buttons;
+
+	if (state.buttons) {
+		var len = state.buttons.length;
+		var buttonsWidth = 0;
+		var buttons = newValue.buttons;
+		for (var i = 0; i < len; i++) {
+			buttonsWidth += buttons[i].width;
+		}
+	}
+	state.buttonsWidth = buttonsWidth;
+}
+
+module.exports = {
+	touchstart: touchstart,
+	touchmove: touchmove,
+	touchend: touchend,
+	sizeChange: sizeChange,
+	statusChange: statusChange
+};

uni_modules/uview-next/components/u-swipe-action-item/nvue.js

@@ -0,0 +1,174 @@
+// nvue操作dom的库，用于获取dom的尺寸信息
+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)
+			// 如果ms为单位，返回ms的数值部分
+			if (duration.indexOf('ms') >= 0) return parseInt(duration)
+			// 如果s为单位，为了得到ms的数值，需要乘以1000
+			if (duration.indexOf('s') >= 0) return parseInt(duration) * 1000
+			// 如果值传了数值，且小于30，认为是s单位
+			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) {
+			// 如果当前正在移动中，或者disabled状态，则返回
+			if(this.moving || this.disabled) { 
+				return this.unbindBindingX()   
+			}
+			if(this.status === 'open') {
+				// 如果在打开状态下，进行点击的话，直接关闭单元格
+				return this.moveCellByAnimation('close') && this.unbindBindingX()
+			}
+			// 特殊情况下，e可能不为一个对象
+			e?.stopPropagation && e.stopPropagation() 
+			e?.preventDefault && e.preventDefault()
+			this.moving = true
+			// 获取元素ref
+			const content = this.getContentRef()
+			let expression = `min(max(${-this.buttonsWidth}, x), 0)`
+			// 尝试关闭其他打开的单元格
+			this.parent && this.parent.closeOther(this)
+			
+			// 阿里为了KPI而开源的BindingX
+			this.panEvent = bindingX.bind({
+				anchor: content,
+				eventType: 'pan',
+				props: [{
+					element: content,
+					// 绑定width属性，设置其宽度值
+					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) {
+						// 如果触摸滑动的过程中，大于单元格的总宽度，或者大于0，意味着已经动过滑动达到了打开或者关闭的状态
+						// 这里直接进行状态的标记
+						this.$nextTick(() => {
+							this.status = deltaX <= -this.buttonsWidth ? 'open' : 'close'
+						})
+					} else if(Math.abs(deltaX) > uni.$u.getPx(this.threshold)) {
+						// 在移动大于阈值、并且小于总按钮宽度时，进行自动打开或者关闭
+						// 移动距离大于0时，意味着需要关闭状态
+						if(Math.abs(deltaX) < this.buttonsWidth) {
+							this.moveCellByAnimation(deltaX > 0 ? 'close' : 'open')
+						}
+					} else {
+						// 在小于阈值时，进行关闭操作(如果在打开状态下，将不会执行bindingX)
+						this.moveCellByAnimation('close')
+					}
+				}
+			})
+		},
+		// 释放bindingX
+		unbindBindingX() {
+			// 释放上一次的资源
+			if (this?.panEvent?.token != 0) {
+				bindingX.unbind({
+					token: this.panEvent?.token,
+					// pan为手势事件
+					eventType: 'pan'
+				})
+			}
+		},
+		// 查询按钮节点信息
+		queryRect() {
+			// 历遍所有按钮数组，通过getRectByDom返回一个promise
+			const promiseAll = this.options.map((item, index) => {
+				return this.getRectByDom(this.$refs[`u-swipe-action-item__right__button-${index}`][0])
+			})
+			// 通过promise.all方法，让所有按钮的查询结果返回一个数组的形式
+			Promise.all(promiseAll).then(sizes => {
+				this.buttons = sizes
+				// 计算所有按钮总宽度
+				this.buttonsWidth = sizes.reduce((sum, cur) => sum + cur.width, 0)
+			})
+		},
+		// 通过nvue的dom模块，查询节点信息
+		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()
+			})
+		},
+		// 获取元素ref
+		getContentRef() {
+			return this.$refs['u-swipe-action-item__content'].ref
+		},
+		beforeDestroy() {
+			this.unbindBindingX()
+		}
+	}
+}

uni_modules/uview-next/components/u-swipe-action-item/props.js

@@ -0,0 +1,39 @@
+export default {
+    props: {
+        // 控制打开或者关闭
+        show: {
+            type: Boolean,
+            default: () => uni.$u.props.swipeActionItem.show
+        },
+        // 标识符，如果是v-for，可用index索引值
+        name: {
+            type: [String, Number, Object],
+            default: () => uni.$u.props.swipeActionItem.name
+        },
+        // 是否禁用
+        disabled: {
+            type: Boolean,
+            default: () => uni.$u.props.swipeActionItem.disabled
+        },
+        // 是否自动关闭其他swipe按钮组
+        autoClose: {
+            type: Boolean,
+            default: () => uni.$u.props.swipeActionItem.autoClose
+        },
+        // 滑动距离阈值，只有大于此值，才被认为是要打开菜单
+        threshold: {
+            type: Number,
+            default: () => uni.$u.props.swipeActionItem.threshold
+        },
+        // 右侧按钮内容
+        options: {
+            type: Array,
+            default: () => uni.$u.props.swipeActionItem.rightOptions
+        },
+        // 动画过渡时间，单位ms
+        duration: {
+            type: [String, Number],
+            default: () => uni.$u.props.swipeActionItem.duration
+        }
+    }
+}

uni_modules/uview-next/components/u-swipe-action-item/u-swipe-action-item.vue

@@ -0,0 +1,316 @@
+<template>
+	<view class="u-swipe-action-item" ref="u-swipe-action-item">
+		<view class="u-swipe-action-item__right">
+			<slot name="button">
+				<view v-for="(item,index) in options" :key="index" class="u-swipe-action-item__right__button"
+					:ref="`u-swipe-action-item__right__button-${index}`" :style="[{
+						alignItems: item.style && item.style.round ? 'center' : 'stretch'
+					}]" @tap="buttonClickHandler(item, index)">
+					<view class="u-swipe-action-item__right__button__wrapper" :style="[{
+							backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
+							borderRadius: item.style && item.style.round ? item.style.round : '0',
+							padding: item.style && item.style.round ? '0' : '0 15px',
+						}, item.style]">
+						<u-icon v-if="item.icon" :name="item.icon"
+							:color="item.style && item.style.color ? item.style.color : '#ffffff'"
+							:size="item.iconSize ? $u.addUnit(item.iconSize) : item.style && item.style.fontSize ? $u.getPx(item.style.fontSize) * 1.2 : 17"
+							:customStyle="{
+								marginRight: item.text ? '2px' : 0
+							}"></u-icon>
+						<text v-if="item.text" class="u-swipe-action-item__right__button__wrapper__text u-line-1"
+							:style="[{
+								color: item.style && item.style.color ? item.style.color : '#ffffff',
+								fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px',
+								lineHeight: item.style && item.style.fontSize ? item.style.fontSize : '16px',
+							}]">{{ item.text }}</text>
+					</view>
+				</view>
+			</slot>
+		</view>
+		
+		<!-- #ifdef APP-VUE || MP-WEIXIN || MP-ALIPAY || H5 || MP-QQ -->
+		<view class="u-swipe-action-item__content" @touchstart="wxs.touchstart" @touchmove="wxs.touchmove"
+			@touchend="wxs.touchend" :status="status" :change:status="wxs.statusChange" :size="size"
+			:change:size="wxs.sizeChange">
+			<slot />
+		</view>
+		<!-- #endif -->
+		
+		<!-- #ifdef MP-BAIDU || MP-TOUTIAO || MP-LARK -->
+		<view class="u-swipe-action-item__content" @touchstart="touchStartHandler" @touchmove="touchMoveHandler"
+			@touchend="touchEndHandler">
+			<slot />
+		</view>
+		<!-- #endif -->
+
+		<!-- #ifdef APP-NVUE -->
+		<view class="u-swipe-action-item__content" ref="u-swipe-action-item__content" @panstart="onTouchstart"
+			@tap="clickHandler">
+			<slot></slot>
+		</view>
+		<!-- #endif -->
+	</view>
+</template>
+<!-- #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ -->
+<script src="./index.wxs" module="wxs" lang="wxs"></script>
+<!-- #endif -->
+<!-- #ifdef MP-ALIPAY -->
+<script src="./index.sjs" module="wxs" lang="sjs"></script>
+<!-- #endif -->
+<script>
+
+	import props from './props.js';
+	import mixin from '../../libs/mixin/mixin'
+	import mpMixin from '../../libs/mixin/mpMixin';
+	// #ifdef APP-NVUE
+	import nvue from './nvue.js';
+	// #endif
+	
+	/**
+	 * SwipeActionItem 滑动单元格子组件
+	 * @description 该组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作
+	 * @tutorial https://uview.d3u.cn/components/swipeAction.html
+	 * @property {Boolean}			show			控制打开或者关闭（默认 false ）
+	 * @property {String | Number}	index			标识符，如果是v-for，可用index索引
+	 * @property {Boolean}			disabled		是否禁用（默认 false ）
+	 * @property {Boolean}			autoClose		是否自动关闭其他swipe按钮组（默认 true ）
+	 * @property {Number}			threshold		滑动距离阈值，只有大于此值，才被认为是要打开菜单（默认 30 ）
+	 * @property {Array}			options			右侧按钮内容
+	 * @property {String | Number}	duration		动画过渡时间，单位ms（默认 350 ）
+	 * @event {Function(index)}	open	组件打开时触发
+	 * @event {Function(index)}	close	组件关闭时触发
+	 * @example	<u-swipe-action><u-swipe-action-item :options="options1" ></u-swipe-action-item></u-swipe-action>
+	 */
+	export default {
+		name: 'u-swipe-action-item',
+		mixins: [
+			mpMixin, 
+			mixin, 
+			props, 
+			// #ifdef APP-NVUE
+			nvue,
+			// #endif
+		],
+		data() {
+			return {
+				// 按钮的尺寸信息
+				size: {},
+				// 父组件u-swipe-action的参数
+				parentData: {
+					autoClose: true,
+				},
+				// 当前状态，open-打开，close-关闭
+				status: 'close',
+				// #ifdef MP-BAIDU || MP-TOUTIAO || MP-LARK
+				// 其他小程序平台的状态管理
+				startX: 0,
+				startY: 0,
+				moving: false,
+				currentX: 0,
+				buttonsWidth: 0,
+				// #endif
+			}
+		},
+		watch: {
+			// 由于wxs/sjs无法直接读取外部的值，需要在外部值变化时，重新执行赋值逻辑
+			wxsInit(newValue, oldValue) {
+				this.$nextTick(() => {
+					this.queryRect()
+				})
+			}
+		},
+		computed: {
+			wxsInit() {
+				return [this.disabled, this.autoClose, this.threshold, this.options, this.duration]
+			}
+		},
+		mounted() {
+			this.init()
+		},
+		// #ifdef VUE3
+		emits: ["click"],
+		// #endif
+		methods: {
+			init() {
+				// 初始化父组件数据
+				this.updateParentData()
+				// #ifndef APP-NVUE
+				uni.$u.sleep().then(() => {
+					this.queryRect()
+				})
+				// #endif
+			},
+			updateParentData() {
+				// 此方法在mixin中
+				this.getParentData('u-swipe-action')
+			},
+			// #ifndef APP-NVUE
+			// 查询节点
+			queryRect() {
+				// #ifdef MP-ALIPAY
+				// 支付宝小程序使用特殊的查询方式
+				uni.createSelectorQuery().in(this).selectAll('.u-swipe-action-item__right__button').boundingClientRect().exec((res) => {
+					const buttons = res[0] || [];
+					this.size = {
+						buttons,
+						show: this.show,
+						disabled: this.disabled,
+						threshold: this.threshold,
+						duration: this.duration
+					}
+				})
+				// #endif
+				// #ifndef MP-ALIPAY
+				this.$uGetRect('.u-swipe-action-item__right__button', true).then(buttons => {
+					this.size = {
+						buttons,
+						show: this.show,
+						disabled: this.disabled,
+						threshold: this.threshold,
+						duration: this.duration
+					}
+				})
+				// #endif
+			},
+			// #endif
+
+			// #ifdef APP-VUE || MP-WEIXIN || MP-ALIPAY || H5 || MP-QQ
+			closeHandler() {
+				this.status = 'close'
+			},
+			setState(status) {
+				this.status = status
+			},
+			closeOther() {
+				// 尝试关闭其他打开的单元格
+				this.parent && this.parent.closeOther(this)
+			},
+			// #endif
+
+			// #ifdef MP-BAIDU || MP-TOUTIAO || MP-LARK
+			// 其他小程序平台的原生JavaScript实现
+			touchStartHandler(e) {
+				if (this.disabled) return;
+				const touch = e.touches[0];
+				this.startX = touch.pageX;
+				this.startY = touch.pageY;
+				this.moving = true;
+				this.closeOther();
+			},
+			
+			touchMoveHandler(e) {
+				if (!this.moving || this.disabled) return;
+				const touch = e.touches[0];
+				const moveX = touch.pageX - this.startX;
+				const moveY = touch.pageY - this.startY;
+				
+				// 判断是否为水平滑动
+				if (Math.abs(moveX) < Math.abs(moveY)) return;
+				
+				// 阻止默认滚动
+				e.preventDefault && e.preventDefault();
+				
+				this.currentX = moveX;
+				this.updateTransform(moveX);
+			},
+			
+			touchEndHandler(e) {
+				if (!this.moving || this.disabled) return;
+				this.moving = false;
+				
+				const moveX = this.currentX;
+				if (Math.abs(moveX) < this.threshold) {
+					this.close();
+				} else {
+					if (moveX < 0) {
+						this.open();
+					} else {
+						this.close();
+					}
+				}
+			},
+			
+			updateTransform(translateX) {
+				// 限制滑动范围
+				if (translateX > 0) translateX = 0;
+				if (Math.abs(translateX) > this.buttonsWidth) translateX = -this.buttonsWidth;
+				
+				// 更新样式
+				const content = this.$refs['u-swipe-action-item'];
+				if (content) {
+					content.style.transform = `translateX(${translateX}px)`;
+				}
+			},
+			
+			open() {
+				this.status = 'open';
+				this.updateTransform(-this.buttonsWidth);
+				this.$emit('open', this.index);
+			},
+			
+			close() {
+				this.status = 'close';
+				this.updateTransform(0);
+				this.$emit('close', this.index);
+			},
+			// #endif
+			
+			// 按钮被点击
+			buttonClickHandler(item, index) {
+				this.$emit('click', {
+					index,
+					name: this.name
+				})
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	.u-swipe-action-item {
+		position: relative;
+		overflow: hidden;
+		/* #ifndef APP-NVUE || MP-WEIXIN */
+		touch-action: pan-y;
+		/* #endif */
+
+		&__content {
+			transform: translateX(0px);
+			background-color: #FFFFFF;
+			z-index: 10;
+		}
+
+		&__right {
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			right: 0;
+			@include flex;
+
+			&__button {
+				@include flex;
+				justify-content: center;
+				overflow: hidden;
+				align-items: center;
+
+				&__wrapper {
+					@include flex;
+					align-items: center;
+					justify-content: center;
+					padding: 0 15px;
+
+					&__text {
+						@include flex;
+						align-items: center;
+						color: #FFFFFF;
+						font-size: 15px;
+						text-align: center;
+						justify-content: center;
+					}
+				}
+			}
+		}
+	}
+</style>