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

相关文章
|
5天前
|
开发框架 人工智能 小程序
小程序常见的 UI 框架
【10月更文挑战第17天】小程序 UI 框架为开发者提供了便捷的工具和资源,帮助他们快速构建高质量的小程序界面。在选择框架时,需要综合考虑各种因素,以找到最适合项目的解决方案。随着技术的不断进步,UI 框架也将不断发展和创新,为小程序开发带来更多的便利和可能性。
12 2
|
2月前
|
小程序 JavaScript 前端开发
小程序常见的UI框架
小程序常见的UI框架
275 60
|
3月前
|
移动开发 小程序 JavaScript
开源的微信小程序框架
【8月更文挑战第22天】开源的微信小程序框架
172 65
|
4月前
|
小程序 数据库
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
110 0
|
5月前
|
小程序 前端开发 JavaScript
微信小程序MINA框架
【6月更文挑战第4天】微信小程序MINA框架是一个专为小程序设计的框架,它主要分为两大部分:页面视图层(View)和AppService应用逻辑层。下面我将结合代码和图示来详细讲解MINA框架。
55 0
|
4月前
|
移动开发 开发框架 前端开发
微信门户开发框架-使用指导说明书(2)--基于框架的开发过程
微信门户开发框架-使用指导说明书(2)--基于框架的开发过程
|
4月前
|
存储 开发框架 小程序
微信门户开发框架-使用指导说明书
微信门户开发框架-使用指导说明书
|
4月前
|
开发框架 前端开发 JavaScript
在微信框架模块中,基于Vue&Element前端的事件和内容的管理
在微信框架模块中,基于Vue&Element前端的事件和内容的管理
|
4月前
|
开发框架 移动开发 前端开发
在微信框架模块中,基于Vue&Element前端的后台管理功能介绍
在微信框架模块中,基于Vue&Element前端的后台管理功能介绍
|
4月前
|
开发框架 前端开发 JavaScript
在微信框架模块中,基于Vue&Element前端,通过动态构建投票选项,实现单选、复选的投票操作
在微信框架模块中,基于Vue&Element前端,通过动态构建投票选项,实现单选、复选的投票操作