文档


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

 npm install wepy-swipe-delete --save
或者
 cnpm install wepy-swipe-delete --save
 
微信小程序wepy框架入门教程-向左滑动删除效果(三)_学习
 

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>

 
微信小程序wepy框架入门教程-向左滑动删除效果(三)_学习_02
 

3:运行编译
wepy build --watch


 
微信小程序wepy框架入门教程-向左滑动删除效果(三)_学习_03
 

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


 
微信小程序wepy框架入门教程-向左滑动删除效果(三)_学习_04
 

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