ThorUI文档

# 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示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码

← tui-bottom-navigation 底部导航 →