平台兼容性

SwipeAction 滑动操作

通过滑动触发选项的容器，组件名：wkiwi-swipe-action

使用方式：

在 script 中引用组件

import wkiwiSwipeAction from "@/components/wkiwi-swipe-action"
export default {
    components: {wkiwiSwipeAction},
    messages:[{
        text: '置顶',
        style: {
            backgroundColor: '#C7C6CD'
        }
    }, {
        text: '删除',
        style: {
            backgroundColor: '#dd524d'
        }
    }],
    messages:[
      {
        title: "系统消息",
        url: [
          "http://img1.3lian.com/gif/more/11/201212/0d1252b54be4f2d240b6b7fe4ed35054.jpg"
        ],
        message: "这是一条系统消息",
        time: "15:15",
        count: 5,
        stick: false, //是否为置顶状态
        disabled: false, //是否禁止滑动
        type: 1 //通知类型消息
      },
      {
        title: "消息任务",
        url: [
          "http://img1.3lian.com/gif/more/11/201212/0d1252b54be4f2d240b6b7fe4ed35054.jpg"
        ],
        message: "这是一条消息任务",
        time: "15:15",
        count: 5,
        stick: false, //是否为置顶状态
        disabled: false, //是否禁止滑动
        type: 1 //通知类型消息
      },
      {
        title: "马云",
        url: [
          "http://img1.3lian.com/gif/more/11/201212/0d1252b54be4f2d240b6b7fe4ed35054.jpg"
        ],
        message: "什么鬼，我有支付宝[禁止滑动]",
        time: "15:15",
        count: 5,
        stick: false, //是否为置顶状态
        disabled: true, //是否禁止滑动
        type: 2 //普通用户类型消息
      },
      {
        title: "扫黑除恶工作小组",
        url: [
          "http://img1.3lian.com/gif/more/11/201212/cd1d745ed855bef27f47c8aff0786067.jpg",
          "http://img1.3lian.com/gif/more/11/201212/c011f2b2ab1a10d79fe931a786503d03.jpg",
          "http://img1.3lian.com/gif/more/11/201212/cf9d56d05c0cbc1edbf21cf64ad9c341.jpg",
          "http://img1.3lian.com/gif/more/11/201212/e10e8faa201671b5a2e8a6146f80d99e.jpg"
        ],
        message: "原地待命",
        time: "15:15",
        count: 22,
        stick: true,
        disabled: false, //是否禁止滑动
        type: 3 //群组消息
      },
      {
        title: "李彦宏",
        url: [
          "http://img1.3lian.com/gif/more/11/201212/c011f2b2ab1a10d79fe931a786503d03.jpg"
        ],
        message: "抄袭我的吧，我早都做过了",
        time: "12:13",
        count: 1,
        stick: false,
        disabled: false, //是否禁止滑动
        type: 2 //普通用户类型消息
      },
      {
        title: "四菜一汤",
        url: [
          "http://img1.3lian.com/gif/more/11/201212/cd1d745ed855bef27f47c8aff0786067.jpg",
          "http://img1.3lian.com/gif/more/11/201212/c011f2b2ab1a10d79fe931a786503d03.jpg",
          "http://img1.3lian.com/gif/more/11/201212/cf9d56d05c0cbc1edbf21cf64ad9c341.jpg",
          "http://img1.3lian.com/gif/more/11/201212/e10e8faa201671b5a2e8a6146f80d99e.jpg"
        ],
        message: "[语音]32秒",
        time: "15:15",
        count: 22,
        stick: true,
        disabled: false, //是否禁止滑动
        type: 3 //群组消息
      },
      {
        title: "雷军",
        url: [
          "http://img1.3lian.com/gif/more/11/201212/cf9d56d05c0cbc1edbf21cf64ad9c341.jpg"
        ],
        message: "微信给你下线，看你还嘚瑟",
        time: "12:11",
        count: 0,
        stick: false,
        disabled: false, //是否禁止滑动
        type: 2 //普通用户类型消息
      },
      {
        title: "前端开发者",
        url: [
          "http://img1.3lian.com/gif/more/11/201212/04b335ead07530a6188a27549fad1a68.jpg"
        ],
        message: "我们的春天来啦，哈哈哈",
        time: "11:35",
        count: 0,
        stick: false,
        disabled: false, //是否禁止滑动
        type: 2 //普通用户类型消息
      },
      {
        title: "微信小程序",
        url: [
          "http://img1.3lian.com/gif/more/11/201212/e10e8faa201671b5a2e8a6146f80d99e.jpg"
        ],
        message: "谁有内测资格啊啊，300万买一个",
        time: "08:23",
        count: 0,
        stick: false,
        disabled: false, //是否禁止滑动
        type: 2 //普通用户类型消息
      },
      {
        title: "小程序",
        url: [
          "http://img1.3lian.com/gif/more/11/201212/3fab6379b6ef53e7c17a1cc772eed0d6.jpg"
        ],
        message: "这个IDE方便都不要配置了",
        time: "03:21",
        count: 5,
        stick: false,
        disabled: false, //是否禁止滑动
        type: 2 //普通用户类型消息
      },
      {
        title: "微信应用号开发群",
        url: [
          "http://img1.3lian.com/gif/more/11/201212/8f3762fb4d791410ec970baa2641344d.jpg"
        ],
        message: "开发的局限性太大了",
        time: "03:08",
        count: 99,
        stick: false,
        disabled: false, //是否禁止滑动
        type: 2 //普通用户类型消息
      },
      {
        title: "后台",
        url: [
          "http://img1.3lian.com/gif/more/11/201212/411cffabcd6e4474b48f1ecac76e1b3f.jpg"
        ],
        message: "不看好小程序",
        time: "02:45",
        count: 0,
        stick: false,
        disabled: false, //是否禁止滑动
        type: 2 //普通用户类型消息
      },
      {
        title: "闯天下",
        url: [
          "http://img1.3lian.com/gif/more/11/201212/04378257474004fcdd62f619d724db0c.jpg"
        ],
        message: "微信太强大了",
        time: "01:09",
        count: 0,
        stick: false,
        disabled: false, //是否禁止滑动
        type: 2 //普通用户类型消息
      },
      {
        title: "小程序",
        url: [
          "http://img1.3lian.com/gif/more/11/201212/58ec7c89b16c529fc9d0dc440a72e14d.jpg"
        ],
        message: "有快来看直播啦，学习开始啦",
        time: "00:24",
        count: 2,
        stick: false,
        disabled: false, //是否禁止滑动
        type: 2 //普通用户类型消息
      }
    ]
}

一般用法

<wkiwi-swipe-action :options="[
    {
            text: '置顶',
            style: {
                    backgroundColor: '#C7C6CD'
            }
    }, {
            text: '删除',
            style: {
                    backgroundColor: '#dd524d'
            }
    }
]">
    :messagesList="messages"
</wkiwi-swipe-action>

**SwipeAction 属性说明：**

|属性名|类型|默认值|是否必填    |说明|
|:--|:--|:--|:--|:--|
|stick|Boolean|false|否|是否为置顶状态|
|disabled|Boolean|false|否|是否禁止滑动|

options 参数说明

|参数|类型|是否必填|说明|
|:--|:--|:--|:--|
|text|String|是|按钮的文字|
|style|Object|否|按钮样式{backgroundColor,color,fontSize}，backgroundColor默认为：#C7C6CD，color默认为：#FFFFFF，fontSize默认为：28upx|

## 项目效果图：
<img src="https://raw.githubusercontent.com/wkiwi/wkiwi-swipe-action/master/demo.gif" width="365" height="619"/>