更新记录

1.0.0（2023-12-28）

• init

平台兼容性

uni-swipe-action-x 滑动动画

通过滑动触发选项的容器，容器内可放置列表等组件，通过左右滑动来触发一些操作。

注意：当前版本只支持 uni-app x

使用组件

注意：uni-swipe-action-x 和 uni-swipe-action-item 需要同时使用

基本用法

在 template 中使用组件

<template>
  <uni-swipe-action-x @change="swipeChange">
    <!-- 基础用法 -->
    <uni-swipe-action-item :right-options="options" :left-options="options" @btnClick="btnClick" >
      <view>SwipeAction 基础使用场景</view>
    </uni-swipe-action-item>
    <!-- 使用插槽 （请自行给定插槽内容宽度）-->
    <uni-swipe-action-item>
      <template #left>
        <view><text>置顶</text></view>
      </template>
      <view>
        <text >使用插槽</text>
      </view>
      <template #right>
        <view><text>删除</text></view>
      </template>
    </uni-swipe-action-item>
    <!-- 混合用法 -->
    <uni-swipe-action-item :right-options="options">
      <template #left>
        <view><text>置顶</text></view>
      </template>
      <view><text>混合使用</text></view>
    </uni-swipe-action-item>
  </uni-swipe-action-x>

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

  <!-- 按组使用 -->
  <uni-swipe-action-x>
      <uni-swipe-action-item :right-options="options" @btnClick="btnClick">
      <view >item1</view>
      </uni-swipe-action-item>
      <uni-swipe-action-item :right-options="options"  @btnClick="btnClick">
      <view>item2</view>
      </uni-swipe-action-item>
      <uni-swipe-action-item :right-options="options"  @btnClick="btnClick">
      <view>item3</view>
      </uni-swipe-action-item>
  </uni-swipe-action-x>
</template>
<script>
import { OptionPropType, ChangeEventType, ClickEventType ,DoneCallback} from '@/uni_modules/uni-swipe-action-x/types.uts'
export default {
  data(){
    return {
      options:[
        {
            text: '取消',
            style: {
                backgroundColor: '#007aff'
            }
        }, {
            text: '确认',
            style: {
                backgroundColor: '#dd524d'
            }
        }
      ] as OptionPropType[]
    }
  },
  methods:{
    btnClick(event:ClickEventType,done:DoneCallback){
      console.log('点击了'+(e.type == 'left' ? '左侧' : '右侧') + e.data.text + '按钮')
            // 其他逻辑 ...
            // 需要主动执行done方法关闭组件
            done()
    },
    swipeChange(event:ChangeEventType,index){
      console.log('当前打开状态：'+ event.type +'，下标：' + event.index)
    }
  }
}

</script>

属性/方法

SwipeActionX Events

SwipeActionX Methond

示例

<template>
  <uni-swipe-action-x ref="swipeAction">
      <uni-swipe-action-item :auto-close="false" :right-options="options">
                <view >item1</view>
                <template #right>
                    <view @click="closeAll"><text>置顶</text></view>
                </template>
      </uni-swipe-action-item>
      <uni-swipe-action-item :auto-close="false" :right-options="options">
                <view>item2</view>
                <template #right>
                    <view @click="closeAll"><text>置顶</text></view>
                </template>

      </uni-swipe-action-item>
      <uni-swipe-action-item :auto-close="false" :right-options="options">
                <view>item3</view>
                <template #right>
                    <view @click="closeAll"><text>置顶</text></view>
                </template>
      </uni-swipe-action-item>
  </uni-swipe-action-x>
    <button @click="closeAll">关闭所有已经打开的组件</button>
</template>
<script>

export default {
  data(){
    return {
      options:[
        {
            text: '取消',
            style: {
                backgroundColor: '#007aff'
            }
        }, {
            text: '确认',
            style: {
                backgroundColor: '#dd524d'
            }
        }
      ] as OptionPropType[]
    }
  },
  methods:{
    closeAll(){
            // 通过ref获取组件实例，ref 用法参考：https://doc.dcloud.net.cn/uni-app-x/component/#method-easycom
            // 通常使用插槽时，不会触发 @btnClick 事件，需要主动调用 closeAll 来关闭组件
      const ref = (this.$refs['swipeAction'] as UniSwipeActionXComponentPublicInstance)
            ref.closeAll()
    }
  }
}

</script>

ChangeEventType 属性

SwipeActionItem Props

OptionPropType 属性

OptionStyleType 属性

SwipeActionItem Events

ChangeEventType 属性