微信小程序wepy框架入门教程-向左滑动删除效果（三）

王小婷

发布于 2025-05-18 16:57:30

8400

代码可运行

文章被收录于专栏：编程微刊编程微刊

运行总次数：0

代码可运行

1:使用微信小程序框架wepy - 滑动删除插件用命令安装

 npm install wepy-swipe-delete --save
或者
 cnpm install wepy-swipe-delete --save

2:在WebStorm里面打开初始化生成的项目编写index.wpy界面的代码以下代码来自插件（复制过来即可使用）

<template>
  <repeat for="{{list}}" key="index" index="index" item="item">
    <swipeDelete :swipeData="item" @delItem.user="handleDelItem">
      <view class="swipe-title">
        {{item.title}}
      </view>
    </swipeDelete>
  </repeat>
</template>

<script>
  import wepy from 'wepy'
  import swipeDelete from 'wepy-swipe-delete'

  export default class Index extends wepy.page {
    components = {
      swipeDelete
    }

    data = {
      list: [
        {id: 1, title: '标题1', style: 0},
        {id: 2, title: '标题2', style: 0}
      ]
    }

    methods = {
      handleDelItem (itemData) {
        console.log(itemData)
      }
    }
  }
</script>