SwipeCell 滑动单元格_swiper-cell-优快云博客

本文链接：https://blog.youkuaiyun.com/BLUESKYHOST/article/details/100691852

本文深入探讨了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;
			    }
			  }