你当前查看的文档是tmui3.2.0（已不再支持NVUE）

[tmui3.1.x nvue点我] [tmui4.x uniappx原生开发代替nvue]

反馈组件

左滑菜单 TmSwitchSlider

常用于对话聊天，订单列表等一些隐藏式按钮设计场景。如果子菜单无法定宽或者被挤夺请写style:flex-shrink: 0;避免。

🌶️ 示例

查看模拟效果－

示例模板

<template>
	<view>
		<tm-sheet>
			<tm-text font-size="36" class="text-weight-b mb-8">左滑菜单 SwitchSlider</tm-text>
			<tm-text color="#999999"> 通过插槽可完全自定义布局，自由度非常高。如果子菜单无法定宽或者被挤夺请写style:flex-shrink: 0;避免。 </tm-text>
		</tm-sheet>
		<tm-sheet :padding="['0px']" class="overflow">
			<tm-switch-slider
				:status="item.opened"
				@open="onopen(index)"
				@close="onclose(index)"
				height="116"
				@disabledScrollChange="disablechange"
				@click="onclick(index)"
				v-for="(item, index) in testList"
				:key="index"
				:disabled="item.disabled"
			>
				<tm-cell
					round="0"
					tbPadding="16"
					minHeight="100"
					:showBottomBorder="false"
					:card="false"
					:title="item.title"
					:desc="item.subtext"
				></tm-cell>
				<template #menu>
					<view class="flex flex-row flex-row-center-end" style="height: 100%">
						<view @click="share" class="flex flex-row flex-row-center-center" style="width: 110px; background: black; height: 100%">
							<text class="text-white">分享</text>
						</view>
						<view @click="remvoe" class="flex flex-row flex-row-center-center" style="width: 110px; background: red; height: 100%">
							<text class="text-white">删除</text>
						</view>
					</view>
				</template>
			</tm-switch-slider>
		</tm-sheet>
	</view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'

const testList = ref<
	{
		title: string
		subtext: string
		disabled: boolean
		opened: boolean
	}[]
>([])
const closeAll = () => {
	let oldlist = testList.value.slice(0)
	oldlist = oldlist.map((el, from: number) => {
		el.opened = false
		return el
	})
	testList.value = oldlist.slice(0)
}
const onopen = (index: number) => {
	let oldlist = testList.value.slice(0)
	oldlist = oldlist.map((el, from: number) => {
		if (from != index) {
			el.opened = false
		} else {
			el.opened = true
		}
		return el
	})
	testList.value = oldlist.slice(0)
}
const onclose = (index: number) => {
	console.log(index)
}
const disablechange = () => {
	console.log('disablechange')
}
const onclick = (index: number) => {
	console.log(index, '--')
	closeAll()
}
const share = () => {
	console.log('share')
    uni.showToast({
        title: '分享',
        icon: 'success'
    })
    closeAll()
}
const remvoe = () => {
	console.log('remvoe')
    uni.showToast({
        title: '删除',
        icon: 'success'
    })
    closeAll()
}

onMounted(() => {
	for (let i = 0; i < 6; i++) {
		testList.value.push({
			title: '标题' + i,
			subtext: i == 1 ? '被禁用' : '描述' + i,
			disabled: i == 1,
			opened: false
		})
	}
})
</script>

<style lang="scss"></style>

🌶️ 兼容性

平台兼容

H5	uniAPP	小程序	version
☑️	☑️	☑️	☑️

🌱 参数

参数名	类型	默认值	描述
custonmStyle	string	''	被拖动层的自定义样式
custonmMenuStyle	string	''	菜单容器层自定义样式
width	string	'100%'	宽度
height	string	'50'	高度，单位随意
disabled	boolean	false	是否禁用
threshold	number	15	当滑动时小于此值，会回弹到原位
duration	number	450	当打开或者松开时的动画时间
status	boolean	false	当前打开状态
borderColor	string	'#f5f5f5'	下边线的颜色
borderDarkColor	string	''	下边线暗黑的颜色
eventNone	boolean	true	让拖动层内容失去响应，拖动更流畅false关闭让内容响应事件，true让内容失去响应
showBottomBorder	boolean	true	是否显示下边线

🌹 事件

事件名	参数	返回数据	描述
disabledScrollChange	-	-	此函数会发现是否禁用你外部滚动的指示。
click	-	-	活动区域被点击时触发
open	-	-	打开菜单时触发
close	-	-	关闭时触发
start	-	-	触摸开始
end	-	-	触摸结束
move	-	-	触摸中
update:status	-	-	等同v-model:status
longTimePress	-	-	长按事件

🌽 slot插槽

插槽名	数据	描述
default	-	默认插槽，你的顶层布局可以在这里
menu	名称：binding,status 类型：-
菜单插槽

🥗 ref方法

方法名	参数	返回值	描述
open	-	-	-
close	-	-	-
setOpts	-	-	-
callEmits	-	-	-