浮动面板 FloatDrawer

---

在线预览

在线模拟尺寸:

介绍

提供流畅的拖拉阻尼效果，回弹丝滑。右滑关闭逻辑已经实现,但在app体验不好,主要是scoll与事件冲突需要官方优化.

平台兼容

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

文件路径

@/uni_modules/tmx-ui/components/x-float-drawer/x-float-drawer.uvue

使用

<x-float-drawer></x-float-drawer>

Props 属性

名称	说明	类型	默认值
show	显示可v-model:show双向绑定 默认是打开还是放置在底部。	boolean	false
onlyHeader	是否仅允许通过标题栏拖动。	boolean	false
duration	动画时间	number	350
round	向上的圆角 空值时，取全局配置的圆角。	string	""
size	百分比，数字字符或者带单位, 默认露出的内容高度	string	"15%"
maxHeight	弹层最大的高度值，默认为屏幕的可视高 提供值时不能为百分比，可以是px,rpx单位数字。如果你不带单位，默认转换为rpx单位。	string	"80%"
triggerDy	当拖动时，触发打开和关闭时的临界值，单位是px 如果没有达到此临界值时，将会回弹至原始位置。	number	100
threshold	当拖动时，如果已经达到了关闭和打开时的临界值时 可以继续拖拉时缓动阻尼值	number	0.045
bgColor	内容层的背景色	string	"white"
darkBgColor	暗黑的背景色,空时，取全局的sheetDarkColor	string	""
actionColor	拖动标题栏的横线背景色	string	"#888888"
disabledScroll	禁用内部的容器并采用view容器	boolean	false
containerType	没有禁用disabledScroll生效 容器内部使用的类型 scroll :scroll-view list : list-view	string	'scroll'
disabled	是否禁用用户滚动等来触发关闭或者打开。	boolean	false
zIndex	层级	number	100
contentMargin	控制内容的边跑,有时需要自定布局时非常有用. 请直接使用style css规则写margin,	string	"0 16px 16px 16px"

Events 事件

名称	参数	说明
close	-	关闭时执行
open	-	打开执行的事件
beforeOpen	-	打开前执行
beforeClose	-	关闭前执行
heightChange	-	高度位置变化时触发这个差值.返回参数evt是个百分比,0%是最低下,100%代表是在最顶部.
movestart	-	开始拖动
moveend	-	结束拖动
update:show	-	等同v-model:show

Slots 插槽

名称	说明	数据
default	默认插槽	show: Boolean show: Number height: Boolean height: Number

Ref 方法

名称	参数	返回值	说明

示例文件路径

/pages/fankui/float-drawer

示例源码

uvue

<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1" direction="none">
	<!-- #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 color="primary">
			<view ref="domview" class="heightani mb-16" :style="{height:spr+'px'}">
				<x-text class="text-size-g text-weight-b ma-16" color="primary">我是丝滑般的差值效果{{spr}}</x-text>
			</view>
			<text class="text-size-g text-weight-b text-white">浮动面板 FloatDrawer</text>
			<text class="text-size-m text-grey mt-10 text-white line-8">可以自由设定露出最小值和最大值，支持rpx,px,%等单位，性能流畅回弹丝滑</text>
			<text class="text-size-m text-grey mt-10 text-white line-8 mb-16">也可以通过双向绑定手动控制打开和关闭</text>
			<text
				class="text-size-m text-grey mt-10 text-white line-8 mb-16">通过movestart,moveend,heightChange配合动画可以实现反向差值动画,类似头条的视频中的评论缩放效果.</text>
			<x-button :block="true" @click="showFloat=true">打开</x-button>

		</x-sheet>

		<x-float-drawer content-margin="0px" @beforeClose="onbeforeclose" @movestart='onmovestart' @moveend="onmoveend"
			@heightChange="onheightChange" v-model:show="showFloat" size="120px" max-height="75%">
			<template v-slot:default="{show,height}">
				<x-sheet :margin="['0']">
					<x-text class="text-size-g text-weight-b mb-16">请拖动我查看效果</x-text>
					<x-button color="success" :block="true" @click="showFloat=false">关闭</x-button>
				</x-sheet>
				<x-sheet height="100" v-for="item in 10" :key="item" color="primary">
				</x-sheet>
			</template>
		</x-float-drawer>
		<view style="height:1000px"></view>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

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

	const showFloat = ref(false)
	const spr = ref(0)
	const ismove = ref(false)
	const domview = ref<UniElement | null>(null)

	const onbeforeclose = () => {
		// console.log(11)
	}

	const onmovestart = () => {
		const dom = domview.value!
		dom.style.setProperty('transition-duration', '0ms')
	}

	const onmoveend = () => {
		const dom = domview.value!
		dom.style.setProperty('transition-duration', '300ms')
	}

	const onheightChange = (pre : number) => {
		const dom = domview.value!
		spr.value = pre * 1.5
		dom.style.setProperty('height', Math.ceil(spr.value) + 'px')
	}
</script>

<style scoped>
	.heightani {
		/* transition-duration: 0ms; */
		transition-property: height;
		transition-timing-function: linear;
		background-color: #ffffff;
		overflow: hidden;
		border-radius: 8px;
	}
</style>