微信小程序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: 打开微信开发者工具查看效果


本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券