微信小程序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月前
|
小程序 数据库
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
201 0
|
4月前
|
移动开发 小程序 JavaScript
开源的微信小程序框架
【8月更文挑战第22天】开源的微信小程序框架
226 65
|
6月前
|
小程序 前端开发 JavaScript
微信小程序MINA框架
【6月更文挑战第4天】微信小程序MINA框架是一个专为小程序设计的框架,它主要分为两大部分:页面视图层(View)和AppService应用逻辑层。下面我将结合代码和图示来详细讲解MINA框架。
76 0
|
5月前
|
小程序
微信小程序—页面滑动,获取可视区域数据
微信小程序—页面滑动,获取可视区域数据
71 2
|
7月前
|
JavaScript Java 测试技术
基于SSM框架的童装购买平台微信小程序+vue.js附带文章和源代码设计说明文档ppt
基于SSM框架的童装购买平台微信小程序+vue.js附带文章和源代码设计说明文档ppt
62 1
|
7月前
|
小程序 JavaScript
在使用微信小程序开发中用vant2框架中的Uploader 文件上传wx.uploadFile无反应和使用多图上传
网上有的说是bind:after-read="afterRead"的命名问题不支持-,但是我这儿执行了console.log("file",file);证明函数运行了。后来发现是multiple="true"原因开启了多图上传,如果是多图上传的话file就是数组了
446 2
|
7月前
|
小程序 前端开发 JavaScript
微信小程序MINA框架
微信小程序MINA框架
320 0
|
7月前
|
小程序 数据可视化 前端开发
微信小程序开发入门教程-文本组件介绍
微信小程序开发入门教程-文本组件介绍
|
2月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
725 7
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
763 1