首页
学习
活动
专区
圈层
工具
发布

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


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

代码语言:javascript
复制
 npm install wepy-swipe-delete --save
或者
 cnpm install wepy-swipe-delete --save

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

代码语言:javascript
复制
<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: 打开微信开发者工具查看效果


下一篇
举报
领券