<template>
<zk-theme type="page" :padding="30" showBack navbarTitle="滑动单元格">
<!-- 基础用法 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text margin="0 0 12rpx 0" text="基础用法" />
<zk-text type="secondary" :size="26" margin="0 0 24rpx 0" text="左滑显示操作按钮" />
<zk-swipe-action ref="swipeAction1" :buttons="buttons" :autoClose="false" @click="onClick">
<view class="demo-item">
<view class="demo-item__left">
<image class="demo-item__avatar" src="/static/user/1.jpg" mode="aspectFill" />
<view class="demo-item__content">
<zk-text :size="30" margin="0 0 8rpx 0" text="基础用法" />
<zk-text type="secondary" :size="26" text="左滑显示删除按钮" />
</view>
</view>
<zk-text type="secondary" :size="24" text="12:30" />
</view>
</zk-swipe-action>
</zk-theme>
<!-- 多按钮 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text margin="0 0 12rpx 0" text="多按钮" />
<zk-text type="secondary" :size="26" margin="0 0 24rpx 0" text="可配置多个操作按钮" />
<zk-swipe-action ref="swipeAction2" :buttons="customButtons" :autoClose="false" @click="onClick">
<view class="demo-item">
<view class="demo-item__left">
<image class="demo-item__avatar" src="/static/user/2.jpg" mode="aspectFill" />
<view class="demo-item__content">
<zk-text :size="30" margin="0 0 8rpx 0" text="多按钮示例" />
<zk-text type="secondary" :size="26" text="左滑显示多个按钮" />
</view>
</view>
<zk-text type="secondary" :size="24" text="昨天" />
</view>
</zk-swipe-action>
</zk-theme>
<!-- 列表场景 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text margin="0 0 12rpx 0" text="列表场景" />
<zk-text type="secondary" :size="26" margin="0 0 24rpx 0" text="在列表中使用" />
<view class="demo-list">
<zk-swipe-action v-for="(item, index) in list" :key="index" :ref="`swipeAction${index}`"
:buttons="listButtons" :autoClose="false"
@click="(button, close) => onListClick(button, item, index, close)">
<view class="demo-list__item">
<image class="demo-list__image" :src="item.image" mode="aspectFill" />
<view class="demo-list__content">
<view class="demo-list__header">
<zk-text :size="32" weight="500" :text="item.title" />
<zk-tag :text="item.tag" type="primary" round :bgColor="item.tagColor " />
</view>
<zk-text type="secondary" :size="28" margin="0 0 16rpx 0" :lines="1" :text="item.desc" />
<view class="demo-list__footer">
<zk-text type="secondary" :size="24" :text="item.time" />
</view>
</view>
</view>
</zk-swipe-action>
</view>
</zk-theme>
</zk-theme>
</template>
<script>
export default {
data() {
return {
// 基础按钮
buttons: [{
text: '删除',
width: 90,
backgroundColor: '#ff4444',
color: '#fff'
}],
// 自定义按钮
customButtons: [{
text: '标记',
width: 90,
backgroundColor: '#ffd21e',
color: '#333'
}, {
text: '删除',
width: 90,
backgroundColor: '#ff4444',
color: '#fff'
}],
// 列表按钮
listButtons: [{
text: '收藏',
width: 90,
backgroundColor: '#3c9cff',
color: '#fff'
}, {
text: '删除',
width: 90,
backgroundColor: '#ff4444',
color: '#fff'
}],
// 列表数据
list: [{
title: '消息通知',
desc: '您有一条新的系统消息，请注意查收。',
image: '/static/user/1.jpg',
time: '10:30',
tag: '未读',
tagColor: '#3c9cff',
count: '2'
}, {
title: '活动推送',
desc: '618大促即将开始，提前关注更多优惠！',
image: '/static/user/2.jpg',
time: '昨天',
tag: '活动',
tagColor: '#ff9900'
}, {
title: '系统通知',
desc: '系统将于今晚24点进行例行维护。',
image: '/static/user/3.jpg',
time: '周一',
tag: '紧急',
tagColor: '#ff4444'
}]
}
},
methods: {
// 点击列表项
onItemClick(event, ref) {
event.stopPropagation()
// 如果当前项是打开状态，则关闭
const swipeAction = this.$refs[ref]
if (swipeAction && swipeAction.isOpen()) {
swipeAction.close()
} else {
console.log('item clicked')
}
},
// 点击列表项（列表场景）
onListItemClick(event, item, index) {
event.stopPropagation()
// 如果当前项是打开状态，则关闭
const swipeAction = this.$refs[`swipeAction${index}`][0]
if (swipeAction && swipeAction.isOpen()) {
swipeAction.close()
} else {
console.log('list item clicked:', item.title)
}
},
onClick(button) {
switch (button.text) {
case '删除':
uni.showModal({
title: '提示',
content: '确定要删除吗？',
success: res => {
if (res.confirm) {
uni.showToast({
title: '删除成功',
icon: 'success'
})
// 确认后才关闭
close && close()
}
}
})
break
case '标记':
uni.showToast({
title: '已标记',
icon: 'success'
})
break
default:
uni.showToast({
title: `点击了${button.text}按钮`,
icon: 'none'
})
}
},
onListClick(button, item, index, close) {
if (button.text === '收藏') {
uni.showToast({
title: `收藏${item.title}`,
icon: 'success'
})
} else if (button.text === '删除') {
uni.showModal({
title: '提示',
content: '确定要删除吗？',
success: res => {
if (res.confirm) {
this.list.splice(index, 1)
uni.showToast({
title: '删除成功',
icon: 'success'
})
// 确认后才关闭
close && close()
}
}
})
}
}
}
}
</script>
<style lang="scss">
.demo-item {
flex-direction: row;
align-items: center;
justify-content: space-between;
display: flex;
&__left {
flex-direction: row;
align-items: center;
display: flex;
}
&__avatar {
width: 80rpx;
height: 80rpx;
border-radius: 40rpx;
margin-right: 20rpx;
}
&__content {
flex-direction: column;
}
}
.demo-list {
&__item {
flex-direction: row;
align-items: flex-start;
margin-bottom: 24rpx;
display: flex;
&:last-child {
margin-bottom: 0;
}
}
&__image {
width: 120rpx;
height: 120rpx;
border-radius: 12rpx;
margin-right: 24rpx;
}
&__content {
flex: 1;
}
&__header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-bottom: 12rpx;
}
&__tag {
padding: 4rpx 16rpx;
border-radius: 24rpx;
}
&__footer {
flex-direction: row;
align-items: center;
justify-content: space-between;
display: flex;
}
&__count {
background-color: #ff4444;
padding: 2rpx 12rpx;
border-radius: 20rpx;
}
}
</style>