ThorUI文档

# tui-slide-view 滑动菜单

介绍

滑动菜单，主要为左滑操作，wxs实现。

此组件适用于App、H5、微信小程序端，其他小程序使用 tui-swipe-action 组件。

# 引入

# uni-app引入

第一种，手动引入（可全局引入）

import tuiSlideView from "@/components/thorui/tui-slide-view/tui-slide-view.vue"
export default {
	components:{
		tuiSlideView
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看 官网文档 (opens new window)。

# uni-app版本平台差异说明

App-Nvue App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
升级中 √ √ √ 使用tui-swipe-action组件 使用tui-swipe-action组件 使用tui-swipe-action组件 使用tui-swipe-action组件

# 微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-slide-view": "/components/thorui/tui-slide-view/tui-slide-view"
  }
}

# 代码演示

部分功能演示，具体可参考示例程序以及文档API。

基础使用

通过 buttons 属性设置菜单按钮。

<!--uni-app-->
<tui-slide-view :buttons="buttons"  @click="handleClick">
	<view class="tui-list-cell">
		<text>左滑菜单（text）</text>
	</view>
</tui-slide-view>

<!--微信小程序-->
<tui-slide-view buttons="{{buttons}}"  bindclick="handleClick">
	<view class="tui-list-cell">
		<text>左滑菜单（text）</text>
	</view>
</tui-slide-view>

//data数据
buttons: [{
	text: '标为未读',
	color: '#fff',
	background: '#4C4C4C',
	//额外参数，根据需要传入
	data:{id:1,custom:2020}
}, {
	text: '不显示',
	color: '#fff',
	background: '#FA9D3B'
}, {
	text: '删除',
	color: '#fff',
	background: '#FA5151'
}]
默认显示左滑菜单

通过 show 属性控制显示隐藏左滑菜单。

<!--uni-app-->
<tui-slide-view :buttons="buttons"  :show="true">
	<view class="tui-list-cell">
		<text>左滑菜单（text）</text>
	</view>
</tui-slide-view>

<!--微信小程序-->
<tui-slide-view buttons="{{buttons}}"  show="{{true}}">
	<view class="tui-list-cell">
		<text>左滑菜单（text）</text>
	</view>
</tui-slide-view>
菜单为图标展示

不同的 buttons 属性数据格式，以及相关属性的设置，控制菜单展示效果。

<!--uni-app-->
<tui-slide-view :buttons="buttonArr" width="100rpx" height="100rpx" radius="100rpx" padding="0">
	<view class="tui-list-cell tui-image__cell">
		<text>左滑菜单（image）</text>
	</view>
</tui-slide-view>

<!--微信小程序-->
<tui-slide-view buttons="{{buttonArr}}" width="100rpx" height="100rpx" radius="100rpx" padding="0">
	<view class="tui-list-cell tui-image__cell">
		<text>左滑菜单（image）</text>
	</view>
</tui-slide-view>

//data数据
buttonArr: [{
	src: '/static/images/extend/icon_edit_3x.png',
	width: '48rpx',
	height: '48rpx',
	background: '#fff'
}, {
	src: '/static/images/extend/icon_delete_3x.png',
	width: '48rpx',
	height: '48rpx',
	background: '#fff'
}]

# Slots

none

# Props

参数 类型 说明 默认值
buttons Array 菜单数据 [{
  text: '删除',
  color: '#fff',
  src: '',
  width: '',
  height: '',
  background: '#FF2100'
}]
width String 菜单宽度，为图标展示时使用 100%
height String 菜单高度，为图标展示时使用 100%
padding String 菜单padding值 0 30rpx
radius String 菜单圆角设置，为图标展示时使用 0
fontSize [Number, String] 菜单字体大小，单位rpx 32
disable Boolean 是否禁用菜单滑动事件 false
show Boolean 是否默认显示滑动菜单 false
duration Number 菜单过渡动画时长，单位ms 350
throttle Number 滑动多少距离菜单展开，单位px 30
showMask Boolean 是否显示mask，设为true则不可同时打开多个菜单 false
buttons 属性Object参数说明

通过 loading 属性设置按钮为加载状态,可结合 disabled 使用。

[{
	text: '删除', //菜单按钮显示文本
	color: '#fff',//菜单按钮文本颜色
	src: '', // img地址 只显示图标时使用
	width: '', //img 宽
	height: '', //img 高
	background: '#FF2100' //菜单按钮背景色
}]

# Events

事件名 说明 回调参数
click 菜单点击事件 {index:索引值,data:自定义data数据 }
close 关闭菜单事件 { }
open 打开菜单事件 { }

# 预览

请以移动端效果为准，touch事件目前尚未完全在PC端做兼容。

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码

← tui-gallery 图片预览 →