左滑菜单 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	让拖动层内容失去响应，会导致顶层里面的内容无法触发事件响应 但好处是：拖动更流畅，没有断断续续。请自行根据场景打开和关闭。 false关闭让内容响应事件，true让内容失去响应。	boolean	true

Events 事件

名称	参数	说明
disabledScrollChange	-	提供这个函数是因为如果你把此组件套在了scroll中 你在ios端根本 无法去阻止 底部的scrollview的滚动，这大概官方是解决不了的 冒泡 事件。我只能绕开。 此函数会发现是否禁用你外部滚动的指示。
click	-	活动区域被点击时触发。
open	-	打开菜单时触发
close	-	关闭时触发
start	-	触发时触发
end	-	触摸结束时触发
move	-	触摸中时触发
update:status	-	等同v-model:status *

Slots 插槽

名称	说明	数据
default	默认插槽，你的顶层布局可以在这里。 由于vue 的diff机制,去掉5ms的延迟。内容层会失去事件响应。请通过组件的@click	-
menu	菜单插槽	status: boolean

Ref 方法

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

示例文件路径

/pages/fankui/switch-slider

示例源码

uvue

<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
	<!-- #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>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</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>