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

文档

• wepy快速指南
• 小程序框架wepy开发文档
• wepy开源
• wepy官方文档
• 微信小程序wepy框架资源汇总

---

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>

3：运行编译
wepy build --watch

4：
打开微信开发者工具查看效果

---

原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，对于博客上面有不会的问题，可以加入qq技术交流群聊：649040560。