swiper-delete-view

小程序自定义组件-购物车左滑删除组件

安装 swiper-delete-view

    npm install --save swiper-delete-view

引用的组件 json配置

    {
        "usingComponents": {
            "slide-view": "swiper-delete-view"
        }
    }

组件参数包含

    {
        moveThreshold: "阈值" // 阈值，往左移动超过则显示菜单项，否则隐藏一般为菜单宽的40%），默认30，
        openWidth: "最大距离" // 可以往左拖动的最大距离,同时它也是组件的初始x坐标，此时菜单不可见,默认75
        open: "菜单是否打开" // true表示打开，false表示关闭，默认false
    }

组件中自定义函数包含3个，handleSliderLeftStart为任意函数，可变更，bind后的函数不能更名

    // sliderLeftStart 开始左滑
    bind:sliderLeftStart="handleSliderLeftStart"
    // change 显示/关闭了菜单
    bind:change="handleChange"
    // delete 删除回调
    bind:delete="handleDelete"

目录结构

以下为推荐使用的目录结构，如果有必要开发者也可以自行做一些调整:

|--miniprogram_dev // 开发环境构建目录
|--miniprogram_dist // 生产环境构建目录
|--src // 源码
|   |--common // 通用 js 模块
|   |--components // 通用自定义组件
|   |--images // 图片资源
|   |--wxml // 通用 wxml 模版资源
|   |--wxs // 通用 wxs 资源
|   |--wxss // 通用 wxss 资源
|   |
|   |--xxx.js/xxx.wxml/xxx.json/xxx.wxss // 暴露的 js 模块/自定义组件入口文件
|
|--test // 测试用例
|--tools // 构建相关代码
|   |--demo // demo 小程序目录，开发环境下会被拷贝生成到 miniprogram_dev 目录中
|   |--test // 测试工具相关目录
|   |--config.js // 构建相关配置文件
|
|--gulpfile.js