rice-ui

暗黑模式

SwipeActions 滑动单元格 ​

预览
01:38
组件名：rice-swipe-actions、rice-swipe-actions-item

可以左右滑动来展示操作按钮的单元格组件。在微信小程序端使用了wxs技术，可以达到流畅的拖动体验。

平台兼容性 ​

uni-app x ​

AndroidiOS鸿蒙Next微信小程序h5
√√√√√

基础用法 ​

通过传递right-menu 或者 left-menu 按钮组即可
需要注意的是 SwipeActionsItem 的点击事件需要根据回调参数中的position区分一下点击的区域，left 表示的是点击的是左边的按钮，right 表示右边,cell 表示点击的是内容区域，详细的类型定义见下

vue
<template>
  <rice-swipe-actions>
    <rice-swipe-actions-item :right-menu="rightMenu" :left-menu="leftMenu" name="swipe" @click="onClick">
      <rice-cell title="滑动单元格" value="两侧滑动" center label="左右菜单" :clickable="false">
        <template #leftIcon>
          <image src="/static/images/avatar.png" class="avatar" />
        </template>
      </rice-cell>
    </rice-swipe-actions-item>
    <rice-swipe-actions-item :right-menu="rightMenu" name="swipe">
      <rice-cell title="滑动单元格" value="只能左滑" center :clickable="false">
        <template #leftIcon>
          <image src="/static/images/avatar2.png" class="avatar" />
        </template>
      </rice-cell>
    </rice-swipe-actions-item>
    <rice-swipe-actions-item :left-menu="leftMenu" name="swipe">
      <rice-cell title="滑动单元格" value="只能右滑" center :clickable="false">
        <template #leftIcon>
          <image src="/static/images/avatar3.png" class="avatar" />
        </template>
      </rice-cell>
    </rice-swipe-actions-item>
  </rice-swipe-actions>
</template>
ts
import { SwipeActionsMenu, SwipeActionsItemClick, SwipeActionsItemOpen, SwipeActionsItemClose } from '@/uni_modules/rice-ui'

const rightMenu = ref<SwipeActionsMenu[]>([{
  text: '添加',
  style: {
    color: "#fff",
    backgroundColor: '#1989fa',
    fontSize: "16px"
  }
}, {
  text: '不显示',
  style: {
    color: '#fff',
    background: "#ed7b2f"
  }
}, {
  text: '删除',
  icon: 'star',
  iconSize: '20px',
  style: {
    color: "#fff",
    backgroundColor: '#ff0000'
  }
}])

const leftMenu = ref<SwipeActionsMenu[]>([{
  text: '删除',
  style: {
    color: "#fff",
    backgroundColor: '#ff0000'
  }
}, {
  text: '编辑',
  icon: 'star',
  style: {
    color: "#fff",
    backgroundColor: '#009efa'
  }
}])

const onClick = (e : SwipeActionsItemClick) => {
  if (e.position == 'cell') {
    if (!e.opened) {
      uni.navigateTo({
        url: '/pages/components/basic/button'
      })
    }
  } else {
    uni.showToast({
      title: `点击了按钮-${e.index}`,
      icon: 'none'
    })
  }

}

异步关闭 ​

设置 auto-close 为 false 后，您需要手动调用组件的方法来关闭单元格

vue
<template>
<rice-swipe-actions :auto-close="false" ref="actionsRef">
  <rice-swipe-actions-item :right-menu="rightMenu" name="first" @click="handleClose">
    <rice-cell title="滑动单元格" value="辅助信息" label="异步关闭" center :clickable="false"></rice-cell>
  </rice-swipe-actions-item>
</rice-swipe-actions>
</template>
ts
const actionsRef = ref<RiceSwipeActionsComponentPublicInstance | null>(null)
const actionsItemRef = ref<RiceSwipeActionsComponentPublicInstance | null>(null)
const handleClose = (e : SwipeActionsItemClick) => {
  if (e.position == 'cell') {
    actionsRef.value?.close?.([e.name!])
    //或者调用swipe-actions-item 组件的close方法
    //actionsItemRef.value?.close()
    return
  }
  uni.showModal({
    title: '提示',
    content: "确认要执行操作吗？",
    showCancel: true,
    success: res => {
      if (res.confirm) {
        actionsRef.value?.close!([e.name!])
        //或者调用swipe-actions-item 组件的close方法
        //actionsItemRef.value?.close()
      }
    }
  })
}

插槽 ​

vue
<template>
  <rice-swipe-actions>
    <rice-swipe-actions-item ref="slotRef">
      <rice-cell title="滑动单元格" value="辅助信息" :clickable="false"></rice-cell>
      <template #right>
        <!-- #ifdef MP -->
        <view class="flex">
        <!-- #endif -->
          <view class="slot-del" @click="close">
            <rice-icon name="delete" color="#fff" />
            <text class="slot-text">删除</text>
          </view>
          <view class="slot-add" @click="close">
            <rice-icon name="plus" color="#fff" />
            <text class="slot-text">添加</text>
          </view>
        <!-- #ifdef MP -->
        </view>
        <!-- #endif -->
      </template>
      <template #left>
        <view class="slot-add" @click="close">
          <text class="slot-text">添加</text>
        </view>
      </template>
    </rice-swipe-actions-item>
  </rice-swipe-actions>
</template>

<script setup>
const slotRef = ref<RiceSwipeActionsItemComponentPublicInstance | null>(null)
const close = () => {
  slotRef.value?.close!()
}
</script>

手动控制 ​

vue
<template>
  <rice-swipe-actions ref="swipeControlRef">
    <rice-swipe-actions-item v-for="item in list" :key="item" :name="item" :right-menu="rightMenu"
    :left-menu="leftMenu">
      <rice-cell :title="`滑动单元格${item}`" value="滑动操作" center></rice-cell>
    </rice-swipe-actions-item>
  </rice-swipe-actions>

  <view class="btn">
    <rice-button text="关闭全部" type="primary" size="small" :custom-style="{marginRight:'16px'}"
    @click="closeAll"></rice-button>
    <rice-button text="关闭1,3" type="primary" size="small" @click="closeSome"></rice-button>
  </view>
</template>
ts
//手动控制
const list = ref(['1', '2', '3'])
const swipeControlRef = ref<RiceSwipeActionsComponentPublicInstance | null>(null)
const closeAll = () => {
  swipeControlRef.value!.closeAll!()
}
const closeSome = () => {
  swipeControlRef.value!.close!(['1', '3'])
}

API ​

SwipeActions Props ​

属性名类型说明默认值
disabledBoolean是否禁用false
accordionBoolean是否手风琴模式false
auto-closeBoolean点击按钮是否自动关闭单元格true
ios-styleBoolean是否为iOS风格true
custom-styleObject自定义style样式-

SwipeActionsItem Props ​

属性名类型说明默认值
nameString|Number唯一标识符-
left-menuSwipeActionsMenu[]（格式见下）左侧菜单项及样式-
right-menuSwipeActionsMenu[]右侧菜单项及样式-
ios-styleBoolean是否ios风格的滑动true
disabledBoolean是否禁止滑动false
durationString动画过渡时间，单位ms300
auto-closeBoolean是否自动关闭true
custom-styleObject自定义style样式-

SwipeActionsItem Events ​

事件名说明回调参数
open打开时触发(event:SwipeActionsItemOpen)
close关闭时触发(event:SwipeActionsItemClose)
click点击单元格时触发(event:SwipeActionsItemClick)

SwipeActions 方法 ​

事件名说明参数
closeAll关闭所有单元格-
close关闭指定的单元格（通过name值进行匹配）[name值]

SwipeActionsItem 方法 ​

事件名说明参数
open打开单元格-
close关闭单元格-

Slot ​

名称说明
default内容区域
left自定义左侧按钮
right自定义右侧按钮

类型定义 ​

ts
type SwipeActionsMenu = {
  text ?: string,
  icon ?: string,
  iconSize ?: string | number,
  disabled ?: boolean,
  style ?: UTSJSONObject
}

type SwipeActionsPosition = "left" | "right" | "cell"

type SwipeActionsItemClick = {
  name ?: string | number,
  position : SwipeActionsPosition,
  index : number, //点击按钮的索引值，如果position是cell，值为-1
  opened : boolean,
}

type SwipeActionsItemOpen = {
  name ?: string | number,
  position : SwipeActionsPosition
}

type SwipeActionsItemClose = {
  name ?: string | number
}

组件导出如下类型

ts
const swipeActionsRef=ref<RiceSwipeActionsComponentPublicInstance|null>(null)
const swipeActionsItemRef=ref<RiceSwipeActionsItemComponentPublicInstance|null>(null)