6.2 列表侧滑操作（Swipe Action）

常用于列表中，通过向左侧滑手势触发，展开原本隐藏的更多功能，多用于删除、收藏等功能。

窄列表

宽列表

实例

基础用法

<template>
  <div class="dof-demo">
    <dof-minibar
      title="列表侧滑操作"
      @dof-minibar-left-button-clicked="back"
    ></dof-minibar>
    <scroller class="scroller">
      <dof-catalog title="使用案例" background-color="#daf9ca" :has-margin="true"></dof-catalog>
      <text class="subtitle">窄列表</text>
      <dof-swipe-action @dof-cell-clicked="cellClicked" @dof-right-clicked="rightClicked" :list-data="cellData">
      </dof-swipe-action>
      <text class="subtitle">窄列表</text>
      <dof-swipe-action @dof-cell-clicked="cellClicked" @dof-right-clicked="rightClick" :list-data="cellData2">
      </dof-swipe-action>
    </scroller>
  </div>
</template>

<style>
.dof-demo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
}
.scroller {
  flex: 1;
}

.subtitle {
  font-size: 28px;
  margin-left: 32px;
  line-height: 60px;
  color: #666;
}
@media screen and (weex-theme: diablo) {
  .dof-demo {
    background-color: #101315;
  }
  .subtitle {
    color: #cfcfd0;
  }
}
</style>

<script>
import { DofSwipeAction, DofMinibar, DofCatalog } from 'dolphin-intl-ui'
import icon from './icon'
import DiabloMixin from 'dolphin-intl-ui/mixins/diablo'

export default {
  mixins: [DiabloMixin],
  components: {
    DofMinibar,
    DofCatalog,
    DofSwipeAction
  },
  data() {
    return {
      leftButton: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/header/icon_back_white@3x.png',
      cellData: [],
      //服务断返回数据
      testCellData: [
        {
          title: '窄列表有图标，列表需要图标辅助说明',
          avatar: '/assets/image/cell/list_icon_shop@3x.png'
        },
        {
          title: '默认效果',
          avatar: '/assets/image/cell/list_icon_mine@3x.png'
        },
        {
          title: '默认效果',
          avatar: '/assets/image/cell/list_icon_equipment@3x.png'
        }
      ]
    }
  },
  computed: {
    cellData2() {
      return [
        {
          title: '标题',
          iconColor: this._isDiablo ? '#2b2f32' : '#F6F7F9',
          avatarIcon: this._isDiablo ? './assets/image/swipe-action/list_ic_005@3x.png' : icon[0],
          iconSize: 'max',
          desc: '副标题文案，副标题文案',
          tag: '标签',
          hasArrow: false,
          hasSubBottomBorder: false,
          rightItem: [{ text: '删除', bgColor: this._isDiablo ? '#D35926' : '#F56428' }]
        },
        {
          title: '标题',
          iconColor: this._isDiablo ? '#2b2f32' : '#F6F7F9',
          avatarIcon: this._isDiablo ? './assets/image/swipe-action/list_ic_005@3x.png' : icon[0],
          iconSize: 'max',
          desc: '副标题文案，副标题文案',
          tag: '标签',
          hasArrow: false,
          hasSubBottomBorder: false,
          rightItem: [
            { text: '收藏', bgColor: this._isDiablo ? '#25A8DC' : '#00A4F2' },
            { text: '置顶', bgColor: this._isDiablo ? '#0490D3' : '#29C3FF' },
            { text: '删除', bgColor: this._isDiablo ? '#D35926' : '#F56428' }
          ]
        },
        {
          title: '标题',
          iconColor: this._isDiablo ? '#2b2f32' : '#F6F7F9',
          avatarIcon: this._isDiablo ? './assets/image/swipe-action/list_ic_005@3x.png' : icon[0],
          iconSize: 'max',
          desc: '副标题文案，副标题文案',
          tag: '标签',
          hasArrow: false,
          rightItem: [
            { text1: '移入', text2: '收藏夹', bgColor: this._isDiablo ? '#E09916' : '#FFAA10' },
            { text: '删除', bgColor: this._isDiablo ? '#D35926' : '#F56428' }
          ]
        }
      ]
    }
  },
  mounted() {
    var swipeArr = [
      { text: '置顶', bgColor: this._isDiablo ? '#25A8DC' : '#00A4F2' },
      { text: '收藏', bgColor: this._isDiablo ? '#0490D3' : '#29C3FF' },
      { text: '删除', bgColor: this._isDiablo ? '#D35926' : '#F56428' }
    ]
    this.cellData = this.testCellData.map((item, index, arr) => {
      return {
        title: item.title,
        avatarIcon: item.avatar,
        iconSize: 'min',
        // hasSubBottomBorder: index < arr.length - 1 ? true : false,
        hasSubBottomBorder: false,
        rightItem: swipeArr.slice(index)
      }
    })
  },
  methods: {
    cellClicked(e) {
      modal.toast({
        message: `example cell clicked, ${e.index}`
      })
    },

    rightClicked(params) {
      //params属性包括当前列表索引以及侧滑后按钮的索引和text文本
      modal.toast({
        message: `rightclicked,${JSON.stringify(params)}`
      })
      if (params.text == '删除') {
        this.cellData.splice(params.index, 1)
      }
    },

    rightClick(params) {
      //params属性包括当前列表索引以及侧滑后按钮的索引和text文本
      modal.toast({
        message: `rightclicked,${JSON.stringify(params)}`
      })
    },

    back() {}
  }
}
</script>

Attributes

Prop	Type	Required	Default	Description
list-data	Array	N	[]	列表数据；每项会传递给内部 dof-cell
list-data[].rightItem	Array	N	-	右侧操作配置；为空时不显示侧滑操作，见注 1
cell-width	Number	N	0	单元格宽度；为 0 时使用 750，设置 padding 时使用 750 - padding
padding	Number	N	0	左侧内边距
need-dark-mode	Boolean	N	false	是否启用 M-dark/T-dark 内置暗黑适配
background-color	String	N	''	背景色
action-background-color	String	N	''	操作区域背景色
text-color	String	N	''	文字颜色
isRTL	Boolean	N	false	是否启用 RTL（从右到左）布局；默认关闭 ^2.5.10

RTL 下操作按钮显示在左侧，右滑展开、左滑收起；纵向滑动不会触发横向操作。rightItem 配置字段及回调数据保持不变。

设置 :need-dark-mode="true" 可启用内置暗黑配色，主题初始化与构建配置见 接入说明。

颜色属性为空时使用内置配色；业务显式颜色和样式覆盖优先于默认配色，关闭暗黑适配后仍有效。

单个操作按钮的业务颜色优先，删除等状态色保留。

• 注1:

Prop	Type	Required	Default	Description
text	String	Y	-	滑动显示的文本
bgColor	String	Y	-	滑动显示的背景色
width	Number	N	160	操作按钮宽度
text1	String	N	-	第一行补充文本
text2	String	N	-	第二行补充文本

Events

事件名	说明	回调参数
dofCellClicked	单击列表项	{ index }，当前列表索引
dofRightClicked	单击右侧操作项	{ index, i, text }，列表索引、操作项索引和操作项文本
switchChange	内置开关项状态变化	当前列表项对象；当 list-data 项包含 switchVal 时触发