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>

    // 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
        autoClose V2.9.2+ Boolean 点击按钮是否自动关闭菜单，为false则需要手动进行关闭，需要结合open和close事件同步状态 true
        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 关闭菜单事件，属性autoClose为false时需要进行同步状态 { }
        open 打开菜单事件，属性autoClose为false时需要进行同步状态 { }

        # 预览

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

        # 特别说明

        该组件为 会员组件，非开源内容，需开通会员才可获取使用。

        # 线上程序扫码预览

        ThorUI组件库 H5二维码 ThorUI示例
        ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码
        Last Updated: 11/3/2023, 11:51:55 PM

        ← tui-gallery 图片预览 →