左滑菜单 xSwitchSlider

---

预览

介绍

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

平台兼容

Harmony	H5	andriod	IOS	小程序	UTS	UNIAPP-X SDK	version
☑	☑	☑️	☑️	☑️	☑️	4.76+	1.1.18

文件路径

@/uni_modules/tmx-ui/components/x-switch-slider/x-switch-slider.uvue

使用

<x-switch-slider></x-switch-slider>

Props 属性

名称	说明	类型	默认值
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	下边线暗黑的颜色，不提供取全局borderDarkColor	string	""
eventNone	让拖动层内容失去响应	boolean	true
showBottomBorder	是否显示下边线	boolean	true

Events 事件

名称	参数	说明
disabledScrollChange	-	-
click	-	-
open	-	-
close	-	-
start	-	-
end	-	-
move	-	-
update:status	-	-
longTimePress	-	-

Slots 插槽

名称	说明	数据
default	默认插槽，你的顶层布局可以在这里。	-
menu	菜单插槽	status: boolean

Ref 方法

名称	参数	返回值	说明
open	-	-	打开 *
close	-	-	关闭 *
setOpts	-	-	-
callEmits	-	-	-

示例文件路径

/pages/fankui/switch-slider

示例源码

uvue

<template>
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor"
			:front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
	<x-sheet>
		<x-text font-size="18" class=" text-weight-b mb-8">左滑菜单 SwitchSlider</x-text>
		<x-text color="#999999">
			通过插槽可完全自定义布局，自由度非常高。如果子菜单无法定宽或者被挤夺请写style:flex-shrink: 0;避免。
		</x-text>
	</x-sheet>
	<x-sheet :padding="['0px']">
		<x-switch-slider :status="item.getBoolean('opened')" @open="onopen(index)" @close="onclose(index)" height="64"
			@disabledScrollChange="disablechange" @click="onclick(index)" v-for="(item,index) in testList" :key="index"
			:disabled="item.getBoolean('disabled')">
			<x-cell leftSize='40' min-height="64" :showBottomBorder="false" :card="false"
				:title="item.getString('title')" :desc="item.getString('subtext')" icon='F264'>

				<template #avatar>
					<x-sheet :margin="['0']" :round="['8']" :padding="['0']" color="primary" width="100%" height="100%"
						class="felx flex-center">
						<x-icon font-size="24" code="F264" color="white"></x-icon>
					</x-sheet>
				</template>

			</x-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>
		</x-switch-slider>
	</x-sheet>

	<x-sheet>
		<x-text font-size="18" class=" text-weight-b">双向绑定</x-text>
	</x-sheet>

	<x-sheet :padding="['0px']">
		<x-switch-slider v-model:status="(showLeft as boolean)" height="64">
			<x-sheet :round="['0']" :margin="['0']" :padding="['24','0']" height="64"
				class="flex flex-row flex-row-center-start">
				<x-text>
					双向绑定{{showLeft}}
				</x-text>

			</x-sheet>

			<template #menu>
				<view class="flex flex-row flex-row-center-end" style="height: 100%;">
					<view class="flex flex-row flex-row-center-center"
						style="width:110px;background:black;height: 100%;">
						<text class="text-white">分享</text>
					</view>
					<view class="flex flex-row flex-row-center-center" style="width:110px;background:red;height: 100%;">
						<text class="text-white">删除</text>
					</view>
				</view>
			</template>
		</x-switch-slider>
	</x-sheet>

	<view style="height: 1500px;"></view>

</template>

<script setup lang="ts">
	import { ref, onBeforeMount } from 'vue'
	const showLeft = ref(false)
	const disabledScoll = ref(false)
	const testList = ref<UTSJSONObject[]>([])

	onBeforeMount(() => {
		for (let i = 0; i < 6; i++) {
			testList.value.push({
				id: Math.random().toString(16).substring(0, 12),
				index: i,
				disabled: i == 1,
				title: i == 1 ? "被禁用" : ("我是对话标题+" + i.toString()),
				subtext: "演示手动管理关闭状态",
				opened: false
			} as UTSJSONObject)
		}
	})

	const onopen = (index : number) => {
		let oldlist = testList.value.slice(0)
		oldlist = oldlist.map((el : UTSJSONObject, from : number) : UTSJSONObject => {
			if (from != index) {
				el.set("opened", false)
			} else {
				el.set("opened", true)
			}
			return el;
		})
		testList.value = oldlist.slice(0)
	}

	const onclose = (index : number) => {
		// 保留空实现与原逻辑一致
	}

	const remvoe = () => {
		console.log('remove')
	}

	const share = () => {
		console.log('share')
	}

	const onclick = (index : number) => {
		uni.showToast({ title: "你点击了：" + index.toString() })
	}

	const disablechange = (disabled : boolean) => {
		disabledScoll.value = disabled;
	}
</script>

<style lang="scss">

</style>