93 lines
2.9 KiB
Markdown
93 lines
2.9 KiB
Markdown
# swipe-action 滑动操作
|
||
### `觉得不错，给个5星好评吧`
|
||
|
||
### QQ交流群（加群持续更新） 607391225
|
||
|
||
|
||
# [点击跳转-本插件示例](https://ext.dcloud.net.cn/plugin?id=2009)
|
||
# [点击跳转-5年的web前端开源的uni-app快速开发模板-下载看文档](https://ext.dcloud.net.cn/plugin?id=2009)
|
||
|
||
### 使用时不懂的请看上面链接的插件示例
|
||
|
||
### 示例代码
|
||
```
|
||
<template>
|
||
<view>
|
||
<swipe-action :options="options" :show="show"><view class="swipe_action">滑动</view></swipe-action>
|
||
<swipe-action :options="options" disabled><view class="swipe_action">禁止滑动</view></swipe-action>
|
||
<view v-for="(item, index) of 3" :key="index" class="swipe_action_list">
|
||
<swipe-action :options="options3" :index="index" @button="onButton">
|
||
<view class="swipe_action">滑动列表{{ index + 1 }}</view>
|
||
</swipe-action>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import swipeAction from '@/components/zhouWei-swipeAction';
|
||
export default {
|
||
components: {
|
||
swipeAction
|
||
},
|
||
data() {
|
||
return {
|
||
options: [
|
||
{
|
||
text: '删除',
|
||
style: {
|
||
backgroundColor: '#dd524d'
|
||
}
|
||
},
|
||
{
|
||
text: '取消',
|
||
style: {
|
||
backgroundColor: '#007aff'
|
||
}
|
||
}
|
||
],
|
||
show: true
|
||
};
|
||
},
|
||
methods: {
|
||
onButton(e) {
|
||
uni.showToast({
|
||
title: '您点击了滑动列表' + (e.index + 1) + '的第' + (e.buttonIndex + 1) + '个按钮，按钮为‘' + e.content.text + '’',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
```
|
||
|
||
|
||
### 使用说明
|
||
| 名称 | 类型 | 默认值 | 描述 |
|
||
| ----------|--------------- | ------------- | -------------------|
|
||
| options | Array | [] | 查看options参数说明 |
|
||
| disabled | Boolean | false | 是否禁止滑动 |
|
||
| show | Boolean | false | 是否打开 |
|
||
| autoClose | Boolean | true | 点击后是否自动关闭 |
|
||
| index | Number | 0 | 循环的时候的索引值，通过@button传递出去 |
|
||
|
||
### options参数说明
|
||
| 名称 | 类型 | 描述 |
|
||
| ------------------------|--------------- | -------------------|
|
||
| text | String | 按钮名称 |
|
||
| style | Object | 按钮样式 |
|
||
| style.backgroundColor | String | 按钮背景颜色 |
|
||
| style.fontSize | String | 按钮字体大小 |
|
||
| style.color | String | 按钮字体颜色 |
|
||
|
||
### 事件
|
||
| 名称 | 描述 |
|
||
| -----------------| --------------------------|
|
||
| button | 左滑按钮点击事件 |
|
||
|
||
```
|
||
按钮左滑按钮点击事件返回值
|
||
{
|
||
content: "点击按钮的options参数",
|
||
index: "循环的时候的索引值",
|
||
buttonIndex: "点击按钮的索引值"
|
||
}
|
||
``` |