# tui-swipe-action 滑动菜单
介绍
swipeAction滑动菜单:actions长度为0时,插槽可直接自定义操作菜单按钮。
# 引入
# uni-app引入
第一种,手动引入(可全局引入)
import tuiSwipeAction from "@/components/thorui/tui-swipe-action/tui-swipe-action.vue"
export default {
components:{
tuiSwipeAction
}
}
第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)。
# uni-app版本平台差异说明
App-Nvue | App-vue | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|---|
升级中 | √ | √ | √ | √ | √ | √ | √ |
# 微信小程序引入(可在app.json中全局引入)
{
"usingComponents": {
"tui-swipe-action": "/components/thorui/tui-swipe-action/tui-swipe-action"
}
}
# 代码演示
部分功能演示,具体可参考示例程序以及文档API。
基础使用
通过 actions
属性设置操作按钮。
<!--uni-app-->
<tui-swipe-action :actions="actions">
<template v-slot:content>
<view class="tui-list-item">基本使用</view>
</template>
</tui-swipe-action>
<!--微信小程序-->
<tui-swipe-action actions="{{actions}}">
<view slot="content" class="tui-list-item">基本使用</view>
</tui-swipe-action>
//data数据
actions: [{
name: '删除',
color: '#fff',
fontsize: 30, //单位rpx
width: 70, //单位px
background: '#FD3B31'
}]
禁止滑动
通过 forbid
属性设置是否禁止滑动出现操作菜单,默认为false。
<!--uni-app-->
<tui-swipe-action :actions="actions" forbid>
<template v-slot:content>
<view class="tui-list-item">基本使用</view>
</template>
</tui-swipe-action>
<!--微信小程序-->
<tui-swipe-action actions="{{actions}}" forbid>
<view slot="content" class="tui-list-item">基本使用</view>
</tui-swipe-action>
使用变量控制开关
通过 open
属性控制滑动菜单打开关闭,默认为 false
,设为 true
时菜单会自动打开展示。
<!--uni-app-->
<tui-swipe-action :actions="actions" :open="open">
<template v-slot:content>
<view class="tui-list-item">基本使用</view>
</template>
</tui-swipe-action>
<!--微信小程序-->
<tui-swipe-action actions="{{actions}}" open="{{open}}">
<view slot="content" class="tui-list-item">基本使用</view>
</tui-swipe-action>
自定义操作菜单
自定义操作菜单时,不设置 actions
属性值即可。在插槽 button
中自定义操作菜单。
<!--uni-app-->
<tui-swipe-action :operateWidth="140">
<template v-slot:content>
<view class="tui-list-item">自定义操作菜单,不传actions</view>
</template>
<template v-slot:button>
<view class="tui-custom-btn_box">
<view class="tui-custom-btn tui-custom-mr" @tap="customBtn(0)"><tui-icon name="star" color="#333" :size="20"></tui-icon></view>
<view class="tui-custom-btn" @tap="customBtn(1)"><tui-icon name="delete" color="#333" :size="18"></tui-icon></view>
</view>
</template>
</tui-swipe-action>
<!--微信小程序-->
<tui-swipe-action operateWidth="{{140}}">
<view class="tui-list-item tui-last" slot="content">自定义操作菜单,不传actions</view>
<view class="tui-custom-btn_box" slot="button">
<view class="tui-custom-btn tui-custom-mr" bindtap="customBtn" data-index="0">
<tui-icon name="star" color="#333" size="{{20}}"></tui-icon>
</view>
<view class="tui-custom-btn" bindtap="customBtn" data-index="1">
<tui-icon name="delete" color="#333" size="{{18}}"></tui-icon>
</view>
</view>
</tui-swipe-action>
# Slots
名称 | 说明 |
---|---|
content | 滑动内容块,自定义内容展示 |
button | 自定义操作菜单时使用,操作菜单内容 |
# Props
参数 | 类型 | 描述 | 默认值 |
---|---|---|---|
actions | Array | 操作菜单按钮 | [ ] |
closable | Boolean | 点击按钮时是否自动关闭 | true |
showMask | Boolean | 设为false,可以滑动多行不关闭菜单 | true |
operateWidth | Number | 按钮宽度 单位px | 80 |
params | Object | 自定义参数,点击按钮回传 | { } |
forbid | Boolean | 禁止滑动 | false |
open | Boolean | 手动开关 | false |
backgroundColor | String | 滑动块内容背景色 | #fff |
actions 属性Object对象参数说明
通过 open
属性控制滑动菜单打开关闭,默认为 false
,设为 true
时菜单会自动打开展示。
[{
name: '删除', //操作名称
color: '#fff', //字体颜色
fontsize: 32, //字体大小,单位rpx
width: 80, // 宽度,单位px
icon: 'like.png', // 图标地址
background: '#ed3f14' //菜单按钮背景色
}]
# Events
事件名 | 说明 | 回调参数 |
---|---|---|
click | 操作菜单按钮点击事件 | { index: Number, // 按钮索引 item: params //参数值 } |
# 预览
请以移动端效果为准,touch事件目前尚未完全在PC端做兼容。
# 线上程序扫码预览
![]() | ![]() | ![]() |
---|---|---|
ThorUI组件库小程序码 | H5二维码 | ThorUI示例小程序码 |