# 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>
// data 数据 及 方法
export default {
data() {
return {
buttons: [{
text: '标为未读',
color: '#fff',
background: '#4C4C4C',
//额外参数,根据需要传入
data:{id:1,custom:2020}
}, {
text: '不显示',
color: '#fff',
background: '#FA9D3B'
}, {
text: '删除',
color: '#fff',
background: '#FA5151'
}]
}
},
methods: {
handleClick(e){
console.log(e)
let index=Number(e.index)
console.log(`你点击了:${this.buttons[index].text}`)
}
}
}
.tui-list-cell {
width: 100%;
height: 120rpx;
padding: 0 30rpx;
box-sizing: border-box;
background-color: #fff;
display: flex;
align-items: center;
}
<!--微信小程序-->
<tui-slide-view buttons="{{buttons}}" bindclick="handleClick">
<view class="tui-list-cell">
<text>左滑菜单(text)</text>
</view>
</tui-slide-view>
// data 数据 及 方法
Page({
data: {
buttons: [{
text: '标为未读',
color: '#fff',
background: '#4C4C4C',
//额外参数,根据需要传入
data:{id:1,custom:2020}
}, {
text: '不显示',
color: '#fff',
background: '#FA9D3B'
}, {
text: '删除',
color: '#fff',
background: '#FA5151'
}]
},
handleClick(e){
console.log(e.detail)
let index=Number(e.detail.index)
console.log(`你点击了:${this.data.buttons[index].text}`)
}
})
.tui-list-cell {
width: 100%;
height: 120rpx;
padding: 0 30rpx;
box-sizing: border-box;
background-color: #fff;
display: flex;
align-items: center;
}
// Make sure to add code blocks to your code group
默认显示左滑菜单
通过 show
属性控制显示隐藏左滑菜单。
<!--uni-app-->
<tui-slide-view :buttons="buttons" :show="true">
<view class="tui-list-cell">
<text>左滑菜单(text)</text>
</view>
</tui-slide-view>
// data 数据 及 方法
export default {
data() {
return {
buttons: [{
text: '标为未读',
color: '#fff',
background: '#4C4C4C',
//额外参数,根据需要传入
data:{id:1,custom:2020}
}, {
text: '不显示',
color: '#fff',
background: '#FA9D3B'
}, {
text: '删除',
color: '#fff',
background: '#FA5151'
}]
}
},
methods: {
}
}
.tui-list-cell {
width: 100%;
height: 120rpx;
padding: 0 30rpx;
box-sizing: border-box;
background-color: #fff;
display: flex;
align-items: center;
}
<!--微信小程序-->
<tui-slide-view buttons="{{buttons}}" show="{{true}}">
<view class="tui-list-cell">
<text>左滑菜单(text)</text>
</view>
</tui-slide-view>
// data 数据 及 方法
Page({
data: {
buttons: [{
text: '标为未读',
color: '#fff',
background: '#4C4C4C',
//额外参数,根据需要传入
data:{id:1,custom:2020}
}, {
text: '不显示',
color: '#fff',
background: '#FA9D3B'
}, {
text: '删除',
color: '#fff',
background: '#FA5151'
}]
}
})
.tui-list-cell {
width: 100%;
height: 120rpx;
padding: 0 30rpx;
box-sizing: border-box;
background-color: #fff;
display: flex;
align-items: center;
}
// Make sure to add code blocks to your code group
菜单为图标展示
不同的 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>
// data 数据 及 方法
export default {
data() {
return {
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'
}]
}
},
methods: {
}
}
.tui-list-cell {
width: 100%;
height: 120rpx;
padding: 0 30rpx;
box-sizing: border-box;
background-color: #fff;
display: flex;
align-items: center;
}
.tui-image__cell{
height: 120rpx;
border-radius: 16rpx;
overflow: hidden;
}
<!--微信小程序-->
<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 数据 及 方法
Page({
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'
}]
}
})
.tui-list-cell {
width: 100%;
height: 120rpx;
padding: 0 30rpx;
box-sizing: border-box;
background-color: #fff;
display: flex;
align-items: center;
}
.tui-image__cell{
height: 120rpx;
border-radius: 16rpx;
overflow: hidden;
}
// Make sure to add code blocks to your code group
# Slots
插槽名称 | 插槽说明 |
---|---|
- | - |
# 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 |
marginTop V2.9.0+ | Number,String | 组件 margin-top值,单位rpx | 0 |
marginBottom V2.9.0+ | Number,String | 组件 margin-bottom值,单位rpx | 0 |
buttons 属性Object参数说明
通过 loading
属性设置按钮为加载状态,可结合 disabled
使用。
[{
text: '删除', //菜单按钮显示文本
color: '#fff',//菜单按钮文本颜色
src: '', // img地址 只显示图标时使用
width: '', //img 宽
height: '', //img 高
background: '#FF2100' //菜单按钮背景色
}]
# Events
注:uni-app端绑定事件使用@前缀,如@click;微信小程序原生使用bind前缀,如bindclick
事件名 | 说明 | 回调参数 |
---|---|---|
click | 菜单点击事件 | {index:索引值,data:自定义data数据 } |
close | 关闭菜单事件 | { } |
open | 打开菜单事件 | { } |
# 预览
请以移动端效果为准,touch事件目前尚未完全在PC端做兼容。
# 特别说明
该组件为 会员组件
,非开源内容,需开通会员才可获取使用。
# 线上程序扫码预览
![]() | ![]() | ![]() |
---|---|---|
ThorUI组件库小程序码 | H5二维码 | ThorUI示例小程序码 |