PHP前端开发

uniapp左滑出现删除按钮

百变鹏仔 4周前 (11-20) #uniapp
文章标签 滑出

随着智能手机的普及和移动互联网的发展,越来越多的人开始使用手机进行各种操作,其中包括使用各种应用程序。在应用程序中,我们通常会遇到一些列表数据,例如通讯录、消息列表、订单列表等等。这些列表经常需要对数据进行操作,比如查看详情、标记已读、删除等等。其中,删除操作是比较常见的一种操作,本篇文章将聚焦于如何在uniapp中实现一个左滑出现删除按钮的效果。

UniApp是一款跨平台开发框架,可以在同一个代码基础上,同时生成多个运行平台(包括iOS、Android、H5、小程序、快应用等)的应用程序。这使得开发者无需为每个平台单独编写代码,大大提高了开发效率,降低了开发成本。本文的示例代码将使用UniApp开发框架中的Vue.js部分作为基础。

一、实现思路

实现左滑出现删除按钮的效果,一般的做法是在列表项中添加一个可滑动的区域,当用户向左滑动该区域时,显示删除按钮。为了保证同时支持多个平台,我们需要考虑在移动设备上的触摸操作和在PC端的鼠标操作。基于此,我们需要实现以下逻辑:

  1. 滑动操作:监听用户操作,判断用户是否在目标区域内进行了滑动操作。
  2. 操作区域:需要在列表项中添加一个可滑动的区域。
  3. 显示删除按钮:当用户在目标区域内向左滑动时,显示删除按钮。
  4. 隐藏删除按钮:当用户在目标区域内向右滑动时,隐藏删除按钮。
  5. 点击删除按钮:当用户点击删除按钮时,触发删除操作。

二、实现过程

  1. 创建列表页面和列表项组件

首先我们需要创建一个列表页面和一个列表项组件,这里我们使用uni-ui框架中的list组件和list-item组件作为基础,以便实现一些基础的样式和布局。具体代码如下:

<!-- list.vue --><template><view><list><list-item v-for="(item, index) in list" :key="index" :data-index="index" :class="item.active ? 'item-active' : ''"><view class="item-content"><view class="item-title">{{item.title}}</view><view class="item-delete" v-show="item.active">删除</view></view></list-item></list></view></template><script>export default {  data() {    return {      list: [        { title: '列表项1', active: false },        { title: '列表项2', active: false },        { title: '列表项3', active: false },        { title: '列表项4', active: false },        { title: '列表项5', active: false },      ],      // 记录当前操作列表项的索引、起始滑动位置、当前滑动位置等信息      currentIndex: -1,      startX: 0,      startY: 0,      moveX: 0,      moveY: 0,    };  },  methods: {    onTouchStart(index, event) {      this.handleTouchStart(index, event.changedTouches[0].pageX, event.changedTouches[0].pageY);    },    onTouchMove(index, event) {      this.handleTouchMove(index, event.changedTouches[0].pageX, event.changedTouches[0].pageY);    },    onTouchEnd(index, event) {      this.handleTouchEnd(index, event.changedTouches[0].pageX, event.changedTouches[0].pageY);    },    onMouseDown(index, event) {      this.handleTouchStart(index, event.pageX, event.pageY);    },    onMouseMove(index, event) {      this.handleTouchMove(index, event.pageX, event.pageY);    },    onMouseUp(index, event) {      this.handleTouchEnd(index, event.pageX, event.pageY);    },    handleTouchStart(index, x, y) {      if (this.currentIndex !== -1) {        return;      }      this.currentIndex = index;      this.startX = x;      this.startY = y;    },    handleTouchMove(index, x, y) {      if (this.currentIndex !== index) {        return;      }      this.moveX = x;      this.moveY = y;      const deltaX = this.moveX - this.startX;      const deltaY = this.moveY - this.startY;      if (Math.abs(deltaX) > Math.abs(deltaY)) {        if (deltaX < 0) {          this.list[index].active = true;        } else {          this.list[index].active = false;        }      }    },    handleTouchEnd(index, x, y) {      if (this.currentIndex !== index) {        return;      }      this.currentIndex = -1;      this.moveX = x;      this.moveY = y;      const deltaX = this.moveX - this.startX;      const deltaY = this.moveY - this.startY;      if (Math.abs(deltaX) > Math.abs(deltaY)) {        if (deltaX < 0) {          this.list[index].active = true;        } else {          this.list[index].active = false;        }      }    },    onDeleteItem(index) {      this.list.splice(index, 1);    },  },};</script><style lang="scss">.item-active .item-content {  transform: translateX(-60px);}.item-content {  position: relative;  height: 60px;  padding: 0 20px;  line-height: 60px;  background-color: #fff;  border-bottom: 1px solid #eee;  overflow: hidden;  .item-delete {    position: absolute;    top: 0;    right: 0;    height: 100%;    padding: 0 20px;    line-height: 60px;    background-color: #f00;    color: #fff;    font-size: 18px;  }}</style>

这里我们在列表项组件的item-content中添加了一个滑动事件监听和一个删除按钮,通过在数据中添加一个active字段来控制显示和隐藏删除按钮。在样式中我们通过transform属性实现左滑效果,并通过overflow:hidden属性隐藏删除按钮。

  1. 监听滑动事件

我们需要监听触摸事件实现滑动操作,代码中使用了单点触摸(touch事件)和鼠标事件(mousedown、mousemove、mouseup事件)监听用户滑动操作。具体实现细节可参考上述代码。

  1. 控制删除按钮的显示和隐藏

当用户在目标区域内向左滑动时,我们需要显示删除按钮;当用户在目标区域内向右滑动时,我们需要隐藏删除按钮。这里我们通过添加active字段实现删除按钮的控制。当用户向左滑动时,我们将active字段置为true,反之则置为false。

  1. 点击删除按钮触发删除操作

当用户点击删除按钮时,我们需要触发删除操作。这里我们通过Vue.js组件实例的splice方法从数据中删除当前项,具体实现可参考示例代码中的onDeleteItem方法。

三、总结

至此,我们已经完成了在UniApp中实现一个左滑出现删除按钮的效果。通过实现滑动事件、控制删除按钮的显示和隐藏、以及点击删除按钮触发删除操作,我们可以在列表数据中方便地添加删除操作。

值得注意的是,在实际开发中,我们可能需要满足更多的需求,例如在删除操作前进行询问、支持多选删除等。在此基础上,我们可以根据实际需求进行更多的扩展和优化,以提升应用程序的用户体验。