您的位置:

uniapp左滑删除详解

一、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事件监听滑动方向,并在相应的函数中实现页面跳转操作。