87 lines
2.3 KiB
Markdown
87 lines
2.3 KiB
Markdown
# liu-watermark适用于uni-app项目的滑动操作、左滑删除、滑动删除组件
|
||
### 本组件目前兼容微信小程序、H5
|
||
### 本组件是简单好用的滑动操作、左滑删除、滑动删除组件，可自定义样式，源码简单易修改
|
||
# --- 扫码预览、关注我们 ---
|
||
|
||
## 扫码关注公众号，查看更多插件信息，预览插件效果！
|
||
|
||
|
||
|
||
### 使用示例
|
||
```
|
||
<template>
|
||
<view class="slide-main">
|
||
<view class="list" v-for="(item,index) in list" :key="index">
|
||
<liu-swipe-action :index="index" @clickItem="clickItem">
|
||
<view class="item">
|
||
<image class="item-img" src="https://cdn.pixabay.com/photo/2022/03/31/14/53/camp-7103189_1280.png">
|
||
</image>
|
||
<view class="item-name">{{item}}</view>
|
||
</view>
|
||
</liu-swipe-action>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
list: ['第1条', '第2条', '第3条', '第4条', '第5条', '第6条']
|
||
}
|
||
},
|
||
methods: {
|
||
//点击操作回调事件
|
||
clickItem(e) {
|
||
console.log('所点击的列表索引：' + e.index)
|
||
console.log('所点击的按钮id：' + e.id)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.slide-main {
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-color: #f0f0f0;
|
||
}
|
||
|
||
.list {
|
||
width: 100%;
|
||
margin-top: 1px;
|
||
}
|
||
|
||
.item {
|
||
width: 100%;
|
||
height: 120rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.item-img {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
margin-left: 28rpx;
|
||
}
|
||
|
||
.item-name {
|
||
margin-left: 16rpx;
|
||
font-size: 30rpx;
|
||
color: #666666;
|
||
}
|
||
</style>
|
||
```
|
||
### 如需图文水印可自行修改组件内容
|
||
|
||
### 属性说明
|
||
| 名称 | 类型 | 默认值 | 描述 |
|
||
| ----------------------------|--------------- | -------------------- | ---------------|
|
||
| index | Number | 0 | 当前列索引
|
||
| disable | Boolean | false | 是否禁用左滑
|
||
| btnList | Array | 默认显示编辑、删除 | 操作按钮数组信息，默认显示编辑、删除，可自定义传入
|
||
| @clickItem | Function | | 点击操作回调事件(返回当前列id和操作按钮id)
|
||
|