更新记录

1.1.6(2020-07-28)

  • 新增 左侧滑动
  • 新增 插槽使用方式
  • 新增 threshold 属性,可以控制滑动缺省值
  • 优化 长列表滚动性能
  • 修复 滚动页面时触发组件滑动的Bug

1.1.5(2020-04-22)

  • 修复 微信小程序 wxs 报错的 Bug
查看更多

发现错误?想参与编辑?在 GitHub 上编辑此页面!

SwipeAction 滑动操作

组件名:uni-swipe-actionuni-swipe-action-item,代码块: uSwipeAction、uSwipeActionItem。

通过滑动触发选项的容器

平台差异说明

如无特殊说明,则全平台支持

组件使用注意事项

为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些必要的错误使用。

  • 组件需要依赖 sass 插件 ,请自行手动安装
  • 如果有动态显示隐藏组件之类的操作,请使用 v-if 而不是 v-show,因为组件内需要获取节点信息,v-show 之后不能正确获取
  • swiperaction的跟手联动是非常考验性能的。为了提高交互体验,本组件在 app 端 vue 页面、h5、微信小程序使用了wxs 技术,nvue 页面使用 bindingx 技术,可以达到流畅的体验。在其他小程序平台由于底层不支持优化技术,只能使用使用普通 js ,此时性能一般。
  • uni-swipe-action 不能嵌套在 swiper 中使用
  • 长列表不建议使用 autoClose属性,会影响组件性能,造成卡顿,原因是打开之后要通知其他已经打开的组件关闭,会导致多个组件重新渲染
  • 事件中传入 $event 获取额外参数

使用方式

方式1 (推荐)

HBuilderX 2.5.5起支持 easycom 组件模式。在使用 uni-ui 的时候,只要uni-ui 组件 安装在项目的 components 目录下,并符合 components/组件名称/组件名称.vue 目录结构。就可以不用引用、注册,直接在页面中使用 uni-ui 组件

easycom 组件模式的好处在于不管 components 目录下安装了多少组件,easycom 打包后会自动剔除没有使用的组件,对组件库的使用尤为友好,组件库批量安装,随意使用,自动按需打包。 关于 easycom 更详细内容 参考文档

方式2(vue-cli)

初始化项目

如果是使用 HBuiderX 创建的项目,需先执行以下命令初始化:

npm init -y

安装 uni-ui

npm install @dcloudio/uni-ui -D

script 中引用组件:

import {uniSwipeAction,uniSwipeActionItem} from '@dcloudio/uni-ui'
export default {
    components: {uniSwipeAction,uniSwipeActionItem}
}

方式3(vue-cli + easycom)

使用 方式2 安装好 uni-ui 之后,需要配置 easycom 规则,让 npm 安装的组件支持 easycom

打开项目根目录下的 pages.json 并添加 easycom 节点:

// pages.json

{
    "easycom": {
        "autoscan": true,
        "custom": {
            // uni-ui 规则如下配置
            "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
        }
    },

    // 其他内容
    pages:[
        // ...
    ]
}

基本用法

<uni-swipe-action>
    <!-- 基础用法 -->
    <uni-swipe-action-item :right-options="options" :left-options="options" @click="onClick" @change="change">
        <view>SwipeAction 基础使用场景</view>
    </uni-swipe-action-item>
    <!-- 使用插槽 (请自行给定插槽内容宽度)-->
    <uni-swipe-action-item>
        <template v-slot:left>
            <view><text>置顶</text></view>
        </template>
        <view>
            <text >使用插槽</text>
        </view>
        <template v-slot:right>
            <view><text>删除</text></view>
        </template>
    </uni-swipe-action-item>
    <!-- 混合用法 -->
    <uni-swipe-action-item :right-options="options">
        <template v-slot:left>
            <view><text>置顶</text></view>
        </template>
        <view><text>混合使用</text></view>
    </uni-swipe-action-item>
</uni-swipe-action>

<!-- 禁止滑动 -->
<uni-swipe-action>
    <uni-swipe-action-item :disabled="true" :right-options="options">
        <view>SwipeAction 基础使用场景</view>
    </uni-swipe-action-item>
</uni-swipe-action>

<!-- 按组使用 -->
<uni-swipe-action>
    <uni-swipe-action-item :right-options="options"  @click="bindClick" @change="swipeChange($event, index)">
        <view >item1</view>
    </uni-swipe-action-item>
    <uni-swipe-action-item :right-options="options"  @click="bindClick" @change="swipeChange($event, index)">
        <view>item2</view>
    </uni-swipe-action-item>
    <uni-swipe-action-item :right-options="options"  @click="bindClick" @change="swipeChange($event, index)">
        <view>item3</view>
    </uni-swipe-action-item>
</uni-swipe-action>
export default {
  data(){
    return {
      options:[
        {
            text: '取消',
            style: {
                backgroundColor: '#007aff'
            }
        }, {
            text: '确认',
            style: {
                backgroundColor: '#dd524d'
            }
        }
      ]
    }
  },
  methods:{
    onClick(e){
      console.log('点击了'+(e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮')
    },
    swipeChange(e,index){
      console.log('当前状态:'+ open +',下标:' + index)
    }
  }
}

属性说明

属性名 类型 默认值 是否必填 说明
show String none 开启关闭组件,auto-close = false 时生效,可选值,left\right\none
threshold Number 20 滑动阙值
disabled Boolean false 是否禁止滑动
autoClose Boolean true 其他组件开启的时候,当前组件是否自动关闭 【注意:长列表使用会有性能问题】
leftOptions Array - 左侧选项内容及样式
rightOptions Array - 右侧选项内容及样式

leftOptions && rightOptions 参数说明

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

插槽

名称 说明
- 默认插槽自定义显示内容
left 左侧滑动内容 ,会覆盖 leftOptions 内容
right 右侧滑动内容 ,会覆盖 rightOptions 内容

事件说明

事件称名 说明 返回参数
@click 点击选项按钮时触发事件 e = {content,index} ,content(点击内容)、index(下标)、position (位置信息)
@change 组件打开或关闭时触发 left:左侧 ,right:右侧,none:关闭

Tips

  • 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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问