SwipeCell 滑动单元格

本文深入探讨了uni-app框架中事件传递的机制与实践,通过具体代码示例讲解了如何在组件中正确使用事件传递,特别是在van-swipe-cell组件上的应用。作者详细解释了onClose方法的使用,以及如何根据不同位置触发相应的操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

关于事件传递的坑

uni-app中传递方法

  • 废话少说直接上代码
		<van-swipe-cell :async-close="true"  id="swipe-cell"  class="swiperCell" @close="onClose" :right-width="70" >
							<view class="messageInfo">
								<view class="message-title-img">
									<image src="https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640" mode=""></image>
								</view>
								<view class="message-title">
									<view class="title-name">
										小野猫
									</view>
									<view class="title-info">
										你在?
									</view>
								</view>
							</view>
							  <view class="deleteStyle" slot="right" data-right="right" >删除</view>
							</van-swipe-cell>
onClose方法,官方的方法名字不能改
		onClose(event) {
				console.log(event);
			    const { position, instance } = event.detail;
					console.log(position);
					console.log(instance);
			    switch (position) {
			      case 'left':
			      case 'cell':
			        instance.close();
			        break;
			      case 'right':
			   uni.showModal({
			       title: '提示',
			       content: '这是一个模态弹窗',
			       success: function (res) {
			           if (res.confirm) {
			               console.log('用户点击确定');
						    instance.close();
			           } else if (res.cancel) {
			               console.log('用户点击取消');
						    instance.close();
			           }
			       }
			   })
				   
			        break;
			    }
			  }
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值