xtf-swipable-cell

组件说明

xtf-swipable-cell 是左右滑动露出操作区的列表单元格，适用于删除、置顶和标记已读。它会自动关闭同页其他已打开实例，并支持代码控制开闭。

基础用法

1. 右滑删除

<template>
  <xtf-swipable-cell right-width="160" name="notice" @click="click">
    <template #right>
      <view
        style="
          width: 160rpx;
          background: #ef4444;
          display: flex;
          align-items: center;
          justify-content: center;
        "
        @tap.stop="remove"
        ><xtf-text color="inverse" text="删除" /></view>
</template>
    <view style="padding: 28rpx"><xtf-text text="系统通知" /></view>
</xtf-swipable-cell>
</template>
<script>
export default {
  methods: {
    click(data) {
      console.log(data.name)
    },
    remove() {
      uni.showToast({ title: '已删除', icon: 'none' })
    }
  }
}
</script>

2. 双侧操作与事件

<template>
  <xtf-swipable-cell
    left-width="140"
    right-width="160"
    name="message"
    @open="opened"
    @close="closed"
    ><template #left
      ><view style="width: 140rpx; background: #16a34a"
        ><xtf-text text="置顶" color="inverse" /></view>
</template>
    <template #right>
      <view style="width: 160rpx; background: #dc2626">
<xtf-text text="删除" color="inverse" /></view>
</template>
    <view style="padding: 28rpx"><xtf-text text="客户消息" /></view>
</xtf-swipable-cell>
</template>
<script>
export default {
  methods: {
    opened(data) {
      console.log(data.position)
    },
    closed(data) {
      uni.showToast({ title: '关闭 ' + data.name, icon: 'none' })
    }
  }
}
</script>

3. 实例控制

<template>
  <view>
    <xtf-button label="打开操作" @click="$refs.cell.open('right')" /><xtf-swipable-cell
      ref="cell"
      right-width="160"
      :auto-close-on-tap="false"
      ><template #right
        ><view style="width: 160rpx; background: #dc2626" @tap.stop="$refs.cell.close()"
          ><xtf-text text="关闭" color="inverse" /></view>
</template>
      <view style="padding: 28rpx"><xtf-text text="可编程控制" /></view>
</xtf-swipable-cell>
  </view>
</template>
<script>
export default {}
</script>

---

全部属性

| 属性 | 类型 | 默认值 | 作用描述 | 适用范围 | | --- | --- | --- | --- | | disabled | Boolean | false | 禁用滑动 | 不可操作项 | | rightWidth/leftWidth | Number \| String | 0/0 | 两侧操作区宽度 rpx | 对应插槽 | | threshold | Number | 0.35 | 打开阈值，限制为 0-1 | 手势灵敏度 | | asyncClose | Boolean | false | 声明属性，源码当前未参与关闭流程 | 兼容配置 | | name | String \| Number | '' | 事件标识 | 列表项 | | autoCloseOnTap | Boolean | true | 打开时点内容是否关闭 | 点击行为 | | customClass/customStyle | String / String \| Object | ''/'' | 根节点样式定制 | 样式覆盖 | | contentClass/contentCustomStyle | String / String \| Object | ''/'' | 内容区样式定制 | 内容卡片 | | leftClass/leftStyle | String / String \| Object | ''/'' | 左操作区样式 | 左插槽 | | rightClass/rightStyle | String / String \| Object | ''/'' | 右操作区样式 | 右插槽 |

事件

事件名称	触发时机	回调参数	参数说明
open	打开任一侧	({ name, position })	标识与 left/right
close	已打开项关闭	({ name, position })	标识与原方向
click	关闭状态点击内容	({ name })	项标识

---

插槽

插槽名	作用	作用域参数	说明
default	单元格主内容	无	始终显示在可滑动内容层
left	左侧操作区	无	向右滑动时露出；插槽内容需自行设置宽度
right	右侧操作区	无	向左滑动时露出；插槽内容需自行设置宽度

完整插槽示例：

<template>
  <xtf-swipable-cell
    left-width="140"
    right-width="160"
    name="message"
    @open="opened"
    @close="closed"
    ><template #left
      ><view
        style="
          width: 140rpx;
          background: #16a34a;
          display: flex;
          align-items: center;
          justify-content: center;
        "
        @tap.stop="pin"
        ><xtf-text text="置顶" color="inverse" /></view>
</template>
    <template #right>
      <view
        style="
          width: 160rpx;
          background: #dc2626;
          display: flex;
          align-items: center;
          justify-content: center;
        "
        @tap.stop="remove"
        ><xtf-text text="删除" color="inverse" /></view>
</template>
    <view style="padding: 28rpx"><xtf-text text="客户消息" /></view>
</xtf-swipable-cell>
</template>
<script>
export default {
  methods: {
    opened(data) {
      console.log(data.position)
    },
    closed(data) {
      console.log(data.position)
    },
    pin() {
      uni.showToast({ title: '已置顶', icon: 'none' })
    },
    remove() {
      uni.showToast({ title: '已删除', icon: 'none' })
    }
  }
}
</script>

---

方法

1. open(direction) - 打开操作区

参数 direction: String，'left' 打开左侧，其他值打开右侧；返回 void。示例见“实例控制”。

2. close() - 关闭操作区

无参数，返回 void；通过 this.$refs.cell.close() 调用。

主题说明

• 内容背景使用 var(--xtf-color-surface)。
• 操作区由具名插槽渲染，颜色和尺寸通常在插槽内容中定义。 如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖上述 CSS 变量。