uniapp左滑删除详解

CJKM • 2024-10-03 23:51 • 编程

一、uniapp左滑删除商品

在电商应用中，左滑删除商品是一项非常重要的功能。在uniapp中实现这个功能非常简单，只需要在<uni-list-item>标签中使用slidable属性即可：

<uni-list>
  <uni-list-item :slidable="true">
    <view slot="content">商品名称</view>
    <view slot="right" @click="deleteProduct">删除</view>
  </uni-list-item>
</uni-list>

上述代码中，使用:slidable="true"开启了左滑删除的功能。同时，content插槽中代表了需要展示的内容，right插槽中代表了右侧的删除按钮。当用户左滑列表项时，会显示出删除按钮。

接下来，在deleteProduct函数中实现删除商品的逻辑即可：

deleteProduct() {
  // 实现删除商品的逻辑
}

二、uniapp列表左滑

除了在电商应用中删除商品，左滑删除的场景还有很多，比如在列表页中删除一项数据。在uniapp中，列表的左滑删除与商品的左滑删除基本相同，只需要在<uni-list-item>标签中配置相应的内容即可：

<uni-list>
  <uni-list-item :slidable="true">
    <view slot="content">列表项内容</view>
    <view slot="right" @click="deleteItem">删除</view>
  </uni-list-item>
</uni-list>

三、uniapp左滑删除插件功能

与实现左滑删除功能相比，使用插件可以更加便捷地实现该功能。在uniapp中，有很多左滑删除功能的插件，比如uni-swipe-actions插件。可以使用以下命令快速安装：

npm install uni-swipe-actions --save

使用该插件，只需要在<uni-swipe-actions>标签中定义左滑后出现的操作即可：

<uni-swipe-actions>
  <view slot="content">列表项内容</view>
  <view slot="actions" class="right">
    <view style="background-color: #f44336;">删除</view>
  </view>
</uni-swipe-actions>

四、uniapp左滑事件

除了左滑删除外，uniapp中还可以通过左滑事件来实现一些交互效果。在uni-list-item中可以绑定@slideleft事件监听左滑动作：

<uni-list-item @slideleft="doSomething">
  <view slot="content">列表项内容</view>
</uni-list-item>

在doSomething函数中可以实现任何想要的操作。

五、uniapp滑动删除

除了左滑删除之外，还有一种类似的功能是滑动删除，也可以使用插件实现。比如uni-slider-delete插件：

<uni-slider-delete>
  <view slot="content">列表项内容</view>
  <view slot="delete-btn" @tap="deleteItem">删除</view>
</uni-slider-delete>

六、uniapp删除短信

uniapp中可以通过LeftSlip删除组件实现短信的左滑删除：

<left-slip @deleteslip="deleteMessage">
  <view slot="center-content">短信内容</view>
  <view slot="right-content">删除</view>
</left-slip>

当用户左滑短信时，会触发@deleteslip事件，在deleteMessage函数中可以实现删除逻辑。

七、uniapp左滑返回

在被打开的页面中使用@slideleft事件，并且在事件中使用uni.navigateBack()方法即可实现左滑返回：

<view @slideleft="uni.navigateBack()">
  <view>返回</view>
</view>

八、uniapp删除页面栈

在页面栈中删除某个页面，可以使用uni.navigateBack({delta: 2})方法。其中的delta代表想要返回的页面数，如果想要删除当前页旁边的两个页面，就可以使用{delta: 2}：

<view @slideleft="uni.navigateBack({delta: 2})">
  <view>删除页面栈中第2个页</view>
</view>

九、uniapp左右滑动切换页面

在uniapp中，实现页面的左右滑动切换可以使用<swiper>标签：

<swiper @swiper-left="gotoNextPage">
  <swiper-item>第一页</swiper-item>
  <swiper-item>第二页</swiper-item>
</swiper>

使用@swiper-left事件监听滑动方向，并在相应的函数中实现页面跳转操作。

原创文章，作者：CJKM，如若转载，请注明出处：https://www.506064.com/n/132310.html