bwadmin/FileCollect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home1022

Browse Source
This commit is contained in:
bwstudio
2025-10-22 08:19:00 +08:00
parent 467b04e5b0
commit 97fbfe08d7
6040 changed files with 529099 additions and 9685 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/componentsA/swipeAction/swipeAction.nvue
+228
View File
@@ -0,0 +1,228 @@
<template>
<view class="u-page">
<view class="u-demo-block">
<text class="u-demo-block__title">演示案例</text>
<view class="u-page__swipe-action-item">
<u-swipe-action>
<u-swipe-action-item
v-if="show1"
:options="options1"
@click="click"
>
<view class="swipe-action u-border-top u-border-bottom">
<view class="swipe-action__content">
<text class="swipe-action__content__text">基础使用</text>
</view>
</view>
</u-swipe-action-item>
</u-swipe-action>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">按钮组</text>
<view class="u-page__swipe-action-item">
<u-swipe-action>
<u-swipe-action-item :options="options2">
<view class="swipe-action u-border-top u-border-bottom">
<view class="swipe-action__content">
<text class="swipe-action__content__text">两个按钮并列</text>
</view>
</view>
</u-swipe-action-item>
</u-swipe-action>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">带图标</text>
<view class="u-page__swipe-action-item">
<u-swipe-action>
<u-swipe-action-item :options="options3">
<view class="swipe-action u-border-top u-border-bottom">
<view class="swipe-action__content">
<text class="swipe-action__content__text">自定义图标</text>
</view>
</view>
</u-swipe-action-item>
</u-swipe-action>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">组合使用</text>
<view class="u-page__swipe-action-item">
<u-swipe-action>
<u-swipe-action-item
:options="item.options"
v-for="(item, index) in options4"
:disabled="item.disabled"
:key="index"
>
<view
class="swipe-action u-border-top"
:class="[index === options4.length - 1 && 'u-border-bottom']"
>
<view class="swipe-action__content">
<text class="swipe-action__content__text">{{ item.text }}</text>
</view>
</view>
</u-swipe-action-item>
</u-swipe-action>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">自定义按钮形状</text>
<view class="u-page__swipe-action-item">
<u-swipe-action>
<u-swipe-action-item :options="options5">
<view class="swipe-action u-border-top u-border-bottom">
<view class="swipe-action__content">
<text class="swipe-action__content__text">圆形按钮</text>
</view>
</view>
</u-swipe-action-item>
</u-swipe-action>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
show1: true,
moveX: 0,
showText: '当前状态：关',
showStatus: false,
options1: [{
text: '删除',
style: {
backgroundColor: '#f56c6c'
}
}],
options2: [{
text: '收藏',
style: {
backgroundColor: '#3c9cff'
}
}, {
text: '删除',
style: {
backgroundColor: '#f56c6c'
}
}],
options3: [{
text: '收藏',
icon: 'star-fill',
iconSize: '20',
style: {
backgroundColor: '#f9ae3d'
}
}],
options4: [{
text: '禁用状态',
disabled: true,
options: [{
text: '置顶',
style: {
backgroundColor: '#3c9cff',
}
},
{
text: '取消',
style: {
backgroundColor: '#f9ae3d',
}
},
],
}, {
text: '正常状态',
disabled: false,
options: [{
text: '置顶',
style: {
backgroundColor: '#3c9cff',
}
},
{
text: '取消',
style: {
backgroundColor: '#f9ae3d',
}
},
],
}, {
text: '自动关闭',
disabled: false,
options: [{
text: '置顶',
style: {
backgroundColor: '#3c9cff',
}
},
{
text: '取消',
style: {
backgroundColor: '#f9ae3d',
}
},
],
}],
options5: [{
icon: 'trash-fill',
style: {
backgroundColor: '#f56c6c',
width: '40px',
height: '40px',
borderRadius: '100px',
margin: '0 6px'
}
}, {
icon: 'heart-fill',
style: {
backgroundColor: '#5ac725',
width: '40px',
height: '40px',
borderRadius: '100px',
margin: '0 6px'
}
}]
}
},
methods: {
click(index) {
console.log('click', index);
uni.showModal({
title: '温馨提示',
content: '确定要删除吗？',
success: res => {
if (res.confirm) {
this.show1 = false
}
}
})
}
}
}
</script>
<style lang="scss">
.u-page {
padding: 0;
}
.u-demo-block__title {
padding: 10px 0 2px 15px;
}
.swipe-action {
&__content {
padding: 25rpx 0;
&__text {
font-size: 15px;
color: $u-main-color;
padding-left: 30rpx;
}
}
}
</style>