cover

uniapp--解决swiperaction.closeOther is not a function的问题

解决swiperaction.closeOther is not a function，并实现侧滑删除的自动关闭功能。

小胖1988

3104人浏览 · 2022-09-07 10:43:36

小胖1988 · 2022-09-07 10:43:36 发布

效果图：

我是做了7年的安卓，uniapp就刚开始弄两三天而已。记录一下，不足之处，请多指教！

直接上全套代码：

<template>
	<view class="page">
		<view style="width: 100%; height: 180upx; background-color: #FF7E05; position: fixed;top: 0;">
			<text
				style="position: absolute;top: 100upx; left: 20upx; font-size: 40upx; color: white;font-weight: bolder;">入库订单</text>
		</view>
		<view class="parent">
			<scroll-view show-scrollbar="true" scroll-y="true" :refresher-enabled="true"
				:refresher-triggered="triggered" @refresherrefresh="refreshStart" @refresherrestore="refreshEnd"
				class="scrollView">
				<view class="itemParent" v-for="(item, index) in orderList" :key="index"
					@click="onItemClick(item, index)">
					<uni-swipe-action>
						<uni-swipe-action-item :right-options="options" @click="onClick($event, index)"
							@change="change($event, index)" :auto-close="autoClose" :show="item.isShow">
							<view class="item">
								<text class="itemText">入库单号：{{ item.orderId }}</text>
								<text class="itemText">单据类型：{{ item.type }}</text>
								<text class="itemText">订单日期：{{ item.date }}</text>
								<text class="itemText">下单状态：{{ item.state }}</text>
								<text class="itemText">订单状态：{{ item.orderState }}</text>

								<image src="../../static/ic_issue.png" v-show="item.state != 1" class="itemImage"
									mode="widthFix"></image>

								<image src="../../static/ic_unissue.png" v-show="item.state != 0" class="itemImage"
									mode="widthFix"></image>
							</view>

						</uni-swipe-action-item>
					</uni-swipe-action>
				</view>
			</scroll-view>


		</view>

		<image src="../../static/ic_add.png" mode="widthFix" class="addImage" @click="addNew"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				triggered: false,
				autoClose: false,
				page: 0,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				orderList: [{
						orderId: "SHDSZ-JD-00220220722001",
						type: "标准单",
						date: "2022-07-31",
						state: "0",
						orderState: "1",
						isShow: 'none',
					}, {
						orderId: "SHDSZ-JD-00220220722002",
						type: "标准单",
						date: "2022-07-31",
						state: "0",
						orderState: "2",
						isShow: 'none',
					}, {
						orderId: "SHDSZ-JD-00220220722003",
						type: "标准单",
						date: "2022-07-31",
						state: "1",
						orderState: "3",
						isShow: 'none',
					}, {
						orderId: "SHDSZ-JD-00220220722004",
						type: "标准单",
						date: "2022-07-31",
						state: "0",
						orderState: "1",
						isShow: 'none',
					}, {
						orderId: "SHDSZ-JD-00220220722005",
						type: "标准单",
						date: "2022-07-31",
						state: "0",
						orderState: "2",
						isShow: 'none',
					}, {
						orderId: "SHDSZ-JD-00220220722006",
						type: "标准单",
						date: "2022-07-31",
						state: "1",
						orderState: "3",
						isShow: 'none',
					}, {
						orderId: "SHDSZ-JD-00220220722007",
						type: "标准单",
						date: "2022-07-31",
						state: "0",
						orderState: "1",
						isShow: 'none',
					}, {
						orderId: "SHDSZ-JD-00220220722008",
						type: "标准单",
						date: "2022-07-31",
						state: "1",
						orderState: "2",
						isShow: 'none',
					}, {
						orderId: "SHDSZ-JD-00220220722009",
						type: "标准单",
						date: "2022-07-31",
						state: "0",
						orderState: "3",
						isShow: 'none',
					}, {
						orderId: "SHDSZ-JD-00220220722010",
						type: "标准单",
						date: "2022-07-31",
						state: "1",
						orderState: "2",
						isShow: 'none',
					}, {
						orderId: "SHDSZ-JD-00220220722011",
						type: "标准单",
						date: "2022-07-31",
						state: "0",
						orderState: "1",
						isShow: 'none',
					}

				]
			}
		},
		onLoad() {
			//onLoad中定义一个变量，此变量用来控制下拉刷新过程中，不允许再次进行刷新动作。
			this._refresh = false
		},
		methods: {
			refreshStart() {
				var self = this;
				//如果已经在刷新中，则直接return，不进行刷新动作，反之，则可以设置当前组件的状态为刷新中
				if (this._refresh)
					return
				this._refresh = true;
				this.triggered = true;
				setTimeout(function() {
					self.triggered = false;
				}, 2000)
			},
			refreshEnd() {
				uni.showToast({
					title: "加载成功",
					duration: 1500
				})
				this._refresh = false;
			},
			onClick(e, index) {
				//点击选项按钮时触发事件	
				//e = {content,index} ，content（点击内容）、index（下标）、position (位置信息)
				var that = this,
					arrays = this.orderList
				uni.showModal({
					title: '温馨提示',
					content: '确定删除此订单吗？',
					confirmColor: "#FF7E05",
					success: function(res) {
						if (res.confirm) {
							console.log("用户点击确定")
							arrays.splice(index, 1)
							//更新数据
							// that.orderList: arrays
						} else if (res.cancel) {
							console.log("用户点击取消")
						}
					},
				})
			},
			change(e, index) {
				//组件打开或关闭时触发	
				// left:左侧 ，right：右侧，none：关闭

				//以下代码实现打开其它item时自动关闭已经打开的组件
				//判断组件打开状态为左侧或右侧打开时
				if (e == "left" || e == "right") {
					//循环遍历订单集合
					for (var i = 0; i < this.orderList.length; i++) {
						if (i == index) {
							//将对应下表的订单isShow更改为当前right状态
							this.orderList[i].isShow = "right"
						} else {
							//其它设为关闭状态
							this.orderList[i].isShow = "none"
						}
					}
				}

			},
			onItemClick(item, index) {
				//判断当前item侧滑展开状态，若为关闭，判断其他项的展开状态后进行点击事件；若为开启，则只做关闭操作
				if (item.isShow == "none") {

					var flag = false
					var openPosition = -1
					for (var i = 0; i < this.orderList.length; i++) {
						if (this.orderList[i].isShow != "none") {
							flag = true
							openPosition = i;
						}
					}

					//判断是否有其它侧滑展开项，若有，则关闭，若无，直接进行点击事件逻辑
					if (flag) {
						this.orderList[openPosition].isShow = "none"
					}
					//点击事件
				} else {
					item.isShow = "none"
				}
			},
			addNew() {
				console.log("addNew")
			}
		}
	}
</script>

<style>
	.page {
		width: 100vw;
		height: 100vh;
		background-color: rgb(231, 231, 231);
	}

	.parent {
		width: 100%;
		height: 100%;
		top: 180rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.scrollView {
		width: 100%;
		height: 100%;
	}

	.itemParent {
		width: 100%;
		margin-top: 10rpx;
	}

	.item {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 10rpx;
		background-color: white;
		border-radius: 10rpx;
	}

	.itemImage {
		width: 180rpx;
		position: absolute;
		top: 40rpx;
		right: 30rpx;
		opacity: 0.5;
	}

	.addImage {
		width: 60rpx;
		position: absolute;
		right: 20rpx;
		bottom: 50rpx;
	}
</style>

<script>
	export default {
		data() {
			return {
				triggered: false,
				autoClose: false,
				openPosition: -1, //侧滑展开项的position,默认为-1
				page: 0,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				orderList: [{
						orderId: "SHDSZ-JD-00220220722001",
						type: "标准单",
						date: "2022-07-31",
						state: "0",
						orderState: "1",
						isShow: 'none',
					}, {
						orderId: "SHDSZ-JD-00220220722002",
						type: "标准单",
						date: "2022-07-31",
						state: "0",
						orderState: "2",
						isShow: 'none',
					}, {
						orderId: "SHDSZ-JD-00220220722003",
						type: "标准单",
						date: "2022-07-31",
						state: "1",
						orderState: "3",
						isShow: 'none',
					}, {
						orderId: "SHDSZ-JD-00220220722004",
						type: "标准单",
						date: "2022-07-31",
						state: "0",
						orderState: "1",
						isShow: 'none',
					}, {
						orderId: "SHDSZ-JD-00220220722005",
						type: "标准单",
						date: "2022-07-31",
						state: "0",
						orderState: "2",
						isShow: 'none',
					}, {
						orderId: "SHDSZ-JD-00220220722006",
						type: "标准单",
						date: "2022-07-31",
						state: "1",
						orderState: "3",
						isShow: 'none',
					}, {
						orderId: "SHDSZ-JD-00220220722007",
						type: "标准单",
						date: "2022-07-31",
						state: "0",
						orderState: "1",
						isShow: 'none',
					}, {
						orderId: "SHDSZ-JD-00220220722008",
						type: "标准单",
						date: "2022-07-31",
						state: "1",
						orderState: "2",
						isShow: 'none',
					}, {
						orderId: "SHDSZ-JD-00220220722009",
						type: "标准单",
						date: "2022-07-31",
						state: "0",
						orderState: "3",
						isShow: 'none',
					}, {
						orderId: "SHDSZ-JD-00220220722010",
						type: "标准单",
						date: "2022-07-31",
						state: "1",
						orderState: "2",
						isShow: 'none',
					}, {
						orderId: "SHDSZ-JD-00220220722011",
						type: "标准单",
						date: "2022-07-31",
						state: "0",
						orderState: "1",
						isShow: 'none',
					}

				]
			}
		},
		onLoad() {
			//onLoad中定义一个变量，此变量用来控制下拉刷新过程中，不允许再次进行刷新动作。
			this._refresh = false
		},
		methods: {
			refreshStart() {
				var self = this;
				//如果已经在刷新中，则直接return，不进行刷新动作，反之，则可以设置当前组件的状态为刷新中
				if (this._refresh)
					return
				this._refresh = true;
				this.triggered = true;
				setTimeout(function() {
					self.triggered = false;
				}, 2000)
			},
			refreshEnd() {
				uni.showToast({
					title: "加载成功",
					duration: 1500
				})
				this._refresh = false;
			},
			onClick(e, index) {
				//点击选项按钮时触发事件	
				//e = {content,index} ，content（点击内容）、index（下标）、position (位置信息)
				var that = this,
					arrays = this.orderList
				uni.showModal({
					title: '温馨提示',
					content: '确定删除此订单吗？',
					confirmColor: "#FF7E05",
					success: function(res) {
						if (res.confirm) {
							console.log("用户点击确定")
							arrays.splice(index, 1)
							//更新数据
							// that.orderList: arrays
						} else if (res.cancel) {
							console.log("用户点击取消")
						}
					},
				})
			},
			change(e, index) {
				//组件打开或关闭时触发	
				// left:左侧 ，right：右侧，none：关闭

				//以下代码实现打开其它item时自动关闭已经打开的组件
				//判断组件打开状态为左侧或右侧打开时
				if (e == "left" || e == "right") {
					//循环遍历订单集合
					for (var i = 0; i < this.orderList.length; i++) {
						if (i == index) {
							//将对应下表的订单isShow更改为当前right状态
							this.orderList[i].isShow = "right"
							this.openPosition = i
						} else {
							//其它设为关闭状态
							this.orderList[i].isShow = "none"
						}
					}
				} else {
					this.openPosition = -1
				}

			},
			onItemClick(item, index) {
				//判断当前item侧滑展开状态，若为关闭，判断其他项的展开状态后进行点击事件；若为开启，则只做关闭操作
				if (item.isShow == "none") {
					//判断是否有其它侧滑展开项，若有，则关闭，若无，直接进行点击事件逻辑
					if (this.openPosition >= 0) {
						this.orderList[this.openPosition].isShow = "none"
					}
					//点击事件
				} else {
					item.isShow = "none"
				}
			},
			addNew() {
				console.log("addNew")
			}

		}
	}
</script>

<style>
	.page {
		width: 100vw;
		height: 100vh;
		background-color: rgb(231, 231, 231);
	}

	.parent {
		width: 100%;
		height: 100%;
		top: 180rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.scrollView {
		width: 100%;
		height: 100%;
	}

	.itemParent {
		width: 100%;
		margin-top: 10rpx;
	}

	.item {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 10rpx;
		background-color: white;
		border-radius: 10rpx;
	}

	.itemImage {
		width: 180rpx;
		position: absolute;
		top: 40rpx;
		right: 30rpx;
		opacity: 0.5;
	}

	.addImage {
		width: 60rpx;
		position: absolute;
		right: 20rpx;
		bottom: 50rpx;
	}
</style>

1、首先，让控制台不报错：

关键代码： :auto-close="autoClose"设置false，不启用自动关闭功能； :show="item.isShow"这个属性来控制关闭开启；

<uni-swipe-action-item :right-options="options" @click="onClick($event, index)"
							@change="change($event, index)" :auto-close="autoClose" :show="item.isShow">

2、在数据List中添加isshow属性来控制侧滑的关闭开启状态；

{
						orderId: "SHDSZ-JD-00220220722001",
						type: "标准单",
						date: "2022-07-31",
						state: "0",
						orderState: "1",
						isShow: 'none',
					}

3、在swipe-action-item组件中设置的change事件中，循环遍历设置每一个item的开启关闭状态

methods: {
        change(e, index) {
				//组件打开或关闭时触发	
				// left:左侧 ，right：右侧，none：关闭

				//以下代码实现打开其它item时自动关闭已经打开的组件
				//判断组件打开状态为左侧或右侧打开时
				if (e == "left" || e == "right") {
					//循环遍历订单集合
					for (var i = 0; i < this.orderList.length; i++) {
						if (i == index) {
							//将对应下表的订单isShow更改为当前right状态
							this.orderList[i].isShow = "right"
							this.openPosition = i
						} else {
							//其它设为关闭状态
							this.orderList[i].isShow = "none"
						}
					}
				} else {
					this.openPosition = -1
				}

			}
}

4、在item的点击事件中，添加如下代码：

onItemClick(item, index) {
				//判断当前item侧滑展开状态，若为关闭，判断其他项的展开状态后进行点击事件；若为开启，则只做关闭操作
				if (item.isShow == "none") {

					var flag = false
					var openPosition = -1
					for (var i = 0; i < this.orderList.length; i++) {
						if (this.orderList[i].isShow != "none") {
							flag = true
							openPosition = i;
						}
					}

					//判断是否有其它侧滑展开项，若有，则关闭，若无，直接进行点击事件逻辑
					if (flag) {
						this.orderList[openPosition].isShow = "none"
					}
					//点击事件
				} else {
					item.isShow = "none"
				}
			}

好了，搞定！

华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

基于Python和TensorFlow实现BERT模型应用

华为云开发者联盟

cover

小窗口大魔力，实况窗服务实时掌控重要信息变化

华为云开发者联盟

cover

GeminiDB全面联动MySQL：热点数据，一键加速

华为云开发者联盟

所有评论(0)

查看更多评论

小胖1988

已为社区贡献1条内容