uniapp插件 uni-swipe-action 滑动操作

黑色滴夜

本组件符合easycom规范


基本用法

在 template 中的使用

[JavaScript] 纯文本查看 复制代码

<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>

插件市场地址:　https://ext.dcloud.net.cn/plugin?id=181