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
    评论
专栏目录
uniapp真机运行的时候报$gwx is not a function错误
gg0613的博客
04-08 2556
12:27:16.041 $gwx is not a function 12:27:16.064 TypeError: $gwx is not a function 这个问题是在hbuildx中运行程序到真机中出现的 在网上找了好多地方 才最终找到答案，为了方便解决这个问题，特别记在这里。 导致这个BUG出现的原因及解决方法如下。 一、单引号包双引号 这是我第一次遇到这个问题的时候找见的BUG ...
使用uni-app报错this.setData is not a function
Stephy_Yy
07-05 1万+
一、报错 出现this.setData is not a function报错的绝大多数情况是，在回调时，this指向作用域为当前异步方法所在的对象，详见微信小程序异常处理——this.setData is not a function报错处理 二、排查原因 但我并没有在回调中使用this.setData()，仅在onLoad里使用也报了这个错误，于是将问题定位到使用了uni-app框架的原因上。 三、解决方式： 3.1 直接使用this.xx = xxx 修改： this.setData({ loadi
微信小程序踩坑4
qq_38393535的博客
08-19 632
TypeError: this.swipeaction.closeOther is not a function
u-swipe-action 点击删除后，删除按钮不能自动关闭
m0_72773910的博客
04-09 502
u-swipe-action 点击删除后，删除按钮不能自动关闭。
uniapp 组件引用 TypeError: this.$refs.xxx is not a function 解决方法（全）
u014538997的博客
08-20 2万+
因为自己的项目中，某些常用模块自己定义了组件，使用时 常出现TypeError: this.$refs.xxx is not a function （即没有xxx这个方法），结合网友和自身遇到的问题，得出三种方法
uniapp 引入uviews index.js没生效 this.$on is not a function
最新发布
资深Bug开发大师
05-15 333
uniapp提示this.$on is not a functionthis. $u is not a function引入uview没生效 使用这种方式样式出来的，但是一些表单方法没生效，发现是uveiws下面的index没引入的原因，也没办法单独引入，后来找了好久，发现是因为uniapp创建的项目是vue3版本，安装的uviews是vue2版本
解决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....
self.attachevent is not a function的解决方法
10-20
今天一个客户用chrome浏览器访问网站，他的网站js提示self.attachevent is not a function，这个问题就是这个浏览器不支持attachevent，可以通过如下方法解决了，分享一下,需要的朋友可以参考下
详解Vue.js搭建路由报错 router.map is not a function
10-19
主要介绍了详解Vue.js搭建路由报错 router.map is not a function，非常具有实用价值，需要的朋友可以参考下
Vue定时器报“timeout.close is not a function”的问题
Z.Dragon 的博客
08-21 1615
今天在项目中用到定时器，发现个问题 当vue清除定时器时 发现报错 解决方案：加上window前缀 无报错信息
vue elementui $confirm is not a function 正确解决办法
liv空间站
08-27 1616
目录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.解决办法 其实看
uniapp 链接iphone手机
weixin_45454281的博客
09-13 1186
证书申请失败: get XcodeToken err GetAppToken err;hsc=401 ec=-22411 au= em=This action cann ot be completed at this time
IOS端小程序橡皮筋回弹效果解决方案及坑总结（uni-swipe-action在IOS端的坑）
weixin_42125732的博客
09-27 1万+
当我们使用uni-swipe-action 滑动这个组件进行左侧滑动删除时，我们会发现安卓手机正常 ，但是IOS手机由于存在bounce效果，会出现抖动的效果，导致我们左侧滑动点击删除时，会有一个橡皮筋的回弹效果，此时我们就需要解决它 1.页面无滚动区域时，可通过页面json配置文件设置disableScroll:true禁止整个页面滚动，从而取消橡皮筋效果。（注意是无滚动区域--因为如果你需要滚动的话就都被禁止滚动了） { "disableScroll":true } 2.页面有滚动区域时，你
记一次微信小程序真机调试失败error_msg:net::ERR_ADDRESS_UNREACHABLE
qq_44795340的博客
09-02 3668
【代码】记一次微信小程序真机调试失败error_msg:net::ERR_ADDRESS_UNREACHABLE。
Uncaught TypeError: XXX is not a function的解决方法
热门推荐
m0_54066656的博客
03-13 2万+
Uncaught TypeError: XXX is not a function的解决方法
【uni-app】uniapp如何实现左滑删除以及改造uni-ui中的swiperAction
搬砖小鱼，请多指教呦
03-23 1万+
左滑删除 或者 置顶之类的功能我们经常要实现，类似于微信的删除聊天框的结构 我就不贴图了 1-如何在uniapp中实现左滑删除 我使用的是uni-ui中的swiperAction 不得不说 性能还是不错的。大家想自己手动封装这个框架也是可以的，可以下载下来源码看看人家的实现思路，在h5和小程序上主要就是使用touchstart和touchend来监控的 插件地址：uni-swipe-action 滑动操作 - DCloud 插件市场 文档地址：action文档 代码参考：这里演示的是最常用的 可以
2021-09-25 在uniapp中 打包成app调用地图 提示 uni.authorize is not a function 怎么办 （图文详解）
weixin_45721912的博客
09-25 7657
很简单的解决方法，因为 如果你是小程序的话 调用地图是需要授权的，所以你就用到了uni.authorize 这个方法，但是这个方法只是支持小程序调用，H5和APP是无法调用的，所以这个时候你只需要加一个判断就好了。代码如下： 1. 首先是小程序的代码 需要加上uni.authorize ，但是要加上 //#ifdef MP-WEIXIN 这个代码的意思是 只在小程序中执行这串代码， 2.其次是H5和APP中的代码，//#endif 这个代码的意思是 就是除了小程序 其他的平台都执行这个代码。这样
this.swipeaction.closeother is not a function
06-28
### 回答1： 这个错误提示是说，this.swipeaction.closeother 不是一个函数。可能是因为你在调用这个函数的时候，没有正确地引入或定义它。你需要检查一下代码，看看是否有相关的引入或定义，或者是否有拼写错误等问题。如果有需要修正，然后再尝试调用这个函数。 ### 回答2： 这是一个错误信息，说明在某个程序中，尝试调用closeother方法，但这个方法并不存在。这个错误通常出现在使用第三方组件时，可能是该组件版本过旧或者开发人员在使用时疏忽了某些参数或方法。 解决此错误的方法取决于具体情况。如果是组件版本过旧，我们可以尝试更新组件或找到替代品。如果是开发人员的问题，我们需要仔细检查代码并查看文档，确保所有参数和方法都正确使用。 此外，我们还可以尝试搜索此错误信息，查看是否有其他人遇到了类似的问题，并寻求帮助。最重要的是，我们应该了解错误信息的含义并仔细查阅文档，以便更好地理解代码中的问题。 ### 回答3： 这里的错误信息 “this.swipeaction.closeother is not a function” 是一种 JavaScript 报错信息，意思是找不到 closeother 方法。在这种情况下，可能有以下几种问题： 1. 变量/属性/方法没有被正确定义 变量、属性或方法没有被正确定义也会导致这个错误。在这种情况下，需要检查代码中所有使用到这个变量/属性/方法的地方，确认其是否被正确的定义、赋值和调用。如果有定义错误的情况，需要对其进行修复。 2. 变量/属性/方法被更改或删除 如果在代码运行期间，变量/属性/方法被更改或删除了，它们的相应函数可能无法正常执行，从而导致 “is not a function” 的错误。在这种情况下，需要检查代码，确保变量、属性或方法没有被非预期地更改或删除。 3. 语法错误或其他错误 如果以上两种情况都不是问题的根源，那么可能是其他错误导致的。例如可能存在语法错误，如函数调用时的错误拼写等等。在这种情况下，需要逐行检查代码，找出问题所在。 总之，通常出现这个错误表示需要调试代码，找到出错原因，然后针对性的进行修复才能解决问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值