SwipeAction 左滑操作栏

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title="左滑操作栏" class="p.30">
		<t-card class='mb.30' title="SwiperAction 左滑操作栏" sub-title="向右滑动来显示隐藏的操作按钮,向左滑动关闭选项">
		</t-card>
		<t-section title="基础功能" class="mb.30"></t-section>
		<t-swipe-action @change="onchange" class="mb.30">
			<t-col class="tdr-tdb">
				<t-cell icon='/static/grid/grid (8).png' :border="false" icon-class="s.45" title="王者荣耀/51分钟前" />
				<t-col class='pblr.20-tdb'>
					<t-text class="sfwb-s.30">【十连必得皮肤】快来抽取好运</t-text>
					<t-text class="slh.85" :lines="1">【玉镖夺魁】活动火热进行中！参与活动投掷十次</t-text>
				</t-col>
			</t-col>
			<template v-slot:buttons>
				<t-row class="h.100%-w.350-faic">
					<t-icon name="setting" type='primary' class="s.80-ff-sta.r"></t-icon>
					<t-icon name="trash" type='error' class="s.80-ff-sta.c"></t-icon>
				</t-row>
			</template>
		</t-swipe-action>
		<t-section title="默认展开" class="mb.30"></t-section>
		<t-swipe-action :value='true' class="mb.30-tdr">
			<t-cell icon='/static/grid/grid (4).png' :border="false" icon-class="s.45" title="中国建设银行/23分钟前" />
			<t-col class='plr.20-tdb'>
				<t-text class="sfwb-s.30">做任务得5元立减现金！</t-text>
				<t-text class="slh.85" :lines="1">就医不带卡，只需要医保码。开通医保电子凭证可领</t-text>
			</t-col>
			<template v-slot:buttons>
				<t-row class="h.100%">
					<t-button class="h.100%-r.0-w.150" type="p">编辑</t-button>
					<t-button class="h.100%-r.0-w.150" type='e'>删除</t-button>
				</t-row>
			</template>
		</t-swipe-action>
	</t-page>
</template>

<script>
	export default {
		data() {
			return {}
		},
		onLoad() {

		},
		methods: {
			onchange(e : boolean) {
				console.log(e)
			}
		}
	}
</script>

Props

名称	描述	类型	默认值	可选值
value	操作项的值，控制操作栏是否展开	Boolean	false	true, false

Events

事件名	描述	回调参数	版本
change	当操作栏展开或收起时触发	(value: Boolean)	-

Slots

名称	描述
default	操作栏内容区域
buttons	操作按钮区域