更新记录

1.0.2（2019-09-21）

• 优化 App平台、H5 平台、微信小程序平台利用 wxs 实现跟手式流畅拖动

SwipeAction 滑动操作

通过滑动触发选项的容器，组件名：uni-swipe-action,代码块： uSwipeAction。

使用方式：

在 script 中引用组件

import {uniSwipeAction} from "@dcloudio/uni-ui"
export default {
    components: {uniSwipeAction}
}

代码示例

<!-- 基础用法 -->
<uni-swipe-action :options="options" @click="" @change="change">
    <view class='cont'>SwipeAction 基础使用场景</view>
</uni-swipe-action>
<!-- 禁止滑动 -->
<uni-swipe-action :disabled="true" :options="options">
    <view class='cont'>点击按钮自动关闭</view>
</uni-swipe-action>

export default {
  data(){
    return {
      options:[
        {
            text: '取消',
            style: {
                backgroundColor: '#007aff'
            }
        }, {
            text: '确认',
            style: {
                backgroundColor: '#dd524d'
            }
        }
      ]
    }
  },
  methods:{
    (e){
      console.log('当前点击的是第'+e.index+'个按钮，点击内容是'+e.content.text)
    },
    change(open){
      console.log('当前开启状态：'+ open)
    }
  }
}

与 List 组件使用

<uni-list>
    <uni-swipe-action :options="options1">
        <uni-list-item title="item1" show-arrow="false"></uni-list-item>
    </uni-swipe-action>
    <uni-swipe-action :options="options2">
        <uni-list-item title="item2" show-arrow="false"></uni-list-item>
    </uni-swipe-action>
    <uni-swipe-action :options="options3">
        <uni-list-item title="item3" show-arrow="false"></uni-list-item>
    </uni-swipe-action>
</uni-list>

SwipeAction 属性说明：

options 参数说明

SwipeAction 事件说明：

注意： iOS 端由于存在bounce效果，滑动体验略差，建议禁止bounce效果，禁止方式如下：

{
    "path": "swipe-action/swipe-action",
    "style": {
        "navigationBarTitleText": "SwipeAction 滑动操作",
        "disableScroll":true,
        "app-plus":{
            "bounce":"none"
        }
    }
}

插件预览地址

https://uniapp.dcloud.io/h5/pages/extUI/swipe-action/swipe-action