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

已于 2022-09-07 15:34:20 修改
阅读量3.1k 收藏 12
点赞数 8
分类专栏： uniapp 文章标签： uni-app
于 2022-09-07 10:43:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huangzuliu/article/details/126740460
版权

效果图：

我是做了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"
				}
			}

好了，搞定！

小胖1988
关注
  • 8
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue 解决通过this.$refs来获取DOM或者组件报错问题
10-15
主要介绍了Vue 解决通过this.$refs来获取DOM或者组件报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
记一次uni-swipe-action中autoClose、closeAll、resize方法不生效问题
weixin_62192841的博客
07-19 940
uni-swipe-action扩展组件的closeAll方法
uni-app uni-swipe-action 滑动操作状态恢复
最新发布
paradoxaaa_的博客
06-07 735
首先，配置一下:show="isOpened[item.id]" @change="change(index)"注意：isOpened一定要定位到你当前点击的内容，我这里是用id区分的， 不然会出现所有列表都同步滑开或者关闭。这样就可以实现及时恢复滑动状态。
微信小程序踩坑4
qq_38393535的博客
08-19 636
TypeError: this.swipeaction.closeOther is not a function
微信小程序报错unshift is not a function
fleshiness的博客
10-20 5756
微信小程序多条数据同步缓存报错： 报错提示：test1.unshift is not a function; [Component] Event Handler Error @ pages/index/index#bound setsto TypeError: test1.unshift is not a function 源代码： Page({ confirm(e){ this.data=e...
Vue定时器报“timeout.close is not a function”的问题
Z.Dragon 的博客
08-21 1625
今天在项目中用到定时器，发现个问题 当vue清除定时器时 发现报错 解决方案：加上window前缀 无报错信息
uni-swipe-action组件函数调用报错VM1173 WAService.js:2 TypeError: Cannot read property ‘userAgent‘ of undefin
qq_46159033的博客
08-16 841
在和根目录(和package.json同级)添加vue.config.js文件。
解决koa2 ctx.render is not a function报错问题
10-18
主要介绍了解决koa2 ctx.render is not a function报错问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
小程序中wx.xx is not a function的报错
03-29
连胜老师今天来说一下小程序后台，运维中心经常报的一个错误：错误提示：wx.getSetting is not a function;at App lifeCycleMethod onLaunch function。   这里的wx.getSetting，可能是其他API，比如wx....
微信小程序报错：this.setData is not a function的解决办法
08-29
"微信小程序报错：this.setData is not a function的解决办法" 微信小程序报错：this.setData is not a function是一个常见的错误，特别是在使用微信小程序开发时。在这个错误中，this.setData变成了undefined，...
self.attachevent is not a function的解决方法
11-28
总之，解决`self.attachevent is not a function`错误的关键在于理解`attachEvent`和`addEventListener`的区别，并通过条件判断或者使用库来实现跨浏览器的兼容性。同时，对于事件处理的模式选择，应根据实际需求和...
uniapp 链接iphone手机
weixin_45454281的博客
09-13 1228
证书申请失败: get XcodeToken err GetAppToken err;hsc=401 ec=-22411 au= em=This action cann ot be completed at this time
uni-swipe-action失效？
qq_39989608的博客
05-08 2308
学习黑马程序员的 uni-shop项目时，下面这段使用了uni-swipe-action，但无效 <!-- 循环渲染购物车中的商品信息 --> <uni-swipe-action> <block v-for="(goods, i) in cart" :key="i"> <uni-swipe-action-item :options="options" @click="swipeItemClickHandler(goods)
IOS端小程序橡皮筋回弹效果解决方案及坑总结（uni-swipe-action在IOS端的坑）
weixin_42125732的博客
09-27 1万+
当我们使用uni-swipe-action 滑动这个组件进行左侧滑动删除时，我们会发现安卓手机正常 ，但是IOS手机由于存在bounce效果，会出现抖动的效果，导致我们左侧滑动点击删除时，会有一个橡皮筋的回弹效果，此时我们就需要解决它 1.页面无滚动区域时，可通过页面json配置文件设置disableScroll:true禁止整个页面滚动，从而取消橡皮筋效果。（注意是无滚动区域--因为如果你需要滚动的话就都被禁止滚动了） { "disableScroll":true } 2.页面有滚动区域时，你
uni-app uni-swipe-action组件 使用插槽渲染按钮，IOS上点击按钮，操作错位
wennuanYU的博客
08-17 4060
uni-app uni-swipe-action组件 使用插槽渲染按钮，IOS上操作错位
vue elementui $confirm is not a function 正确解决办法
liv空间站
08-27 1638
目录1.问题描述2.输出对象3.解决办法 1.问题描述 正常写this.confirm或者Vue.confirm或者Vue.confirm或者Vue.confirm，可能会报错$confirm is not a function，这是由于Vue对象下并没有这个方法，查看Vue或者this对象，发现prototype对象下有很多方法，其中就包含 $confirm 2.输出对象 console.log(Vue.prototype) console.log(this.prototype) 3.解决办法 其实看
Vue TypeError: this.$confirm is not a function
热门推荐
哈
11-23 1万+
错误 在使用element ui，采用局部引入时候，报错TypeError: this.$confirm is not a function。 因为没有在vue的实例上挂载confirm和confirm和confirm和message导致的报错 解决方案 修改element.js文件： 1 引入messageBox 插件 import {MessageBox} from ‘element-ui’ 2 在vue 的原型对象上挂载confirm Vue.prototype.$confirm = Mess
解决uniapp无法ios运行的问题
湖北太米网络科技有限公司
12-13 1988
在进行设备兼容性检查时，可以首先确认自己的设备型号和操作系统版本，然后查看uniapp的官方文档或者社群论坛，了解该设备型号和操作系统版本对于uniapp的支持情况。因此，在开发和使用uniapp应用时，需要注意应用所需的权限，并在应用中进行相应的权限请求和适配。通过调用相关的API方法，可以在应用运行时主动申请所需的权限，并在用户授权之后进行相关的操作。在Xcode项目的Info.plist文件中确认权限是否正确配置，确保应用在运行时正确申请和检查权限，以及在系统设置中正确授权应用所需的权限。
this.swipeaction.closeother is not a function
06-28
这个错误提示是说，this.swipeaction.closeother 不是一个函数。可能是因为你在调用这个函数的时候，没有正确地引入或定义它。你需要检查一下代码，看看是否有相关的引入或定义，或者是否有拼写错误等问题。如果有...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值