tmui4x 2.0(Vapor)

主题

TMUI4x2026-09-29
687
2.8m

浮动面板 FloatDrawer ​

预览

介绍 ​

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

平台兼容 ​

HarmonyH5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑☑️☑️☑️☑️4.76+1.1.18

文件路径 ​

ts

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

使用 ​

ts

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

Props 属性 ​

名称说明类型默认值
show显示可v-model:show双向绑定
默认是打开还是放置在底部。
booleanfalse
onlyHeader是否仅允许通过标题栏拖动。
booleanfalse
duration动画时间
number350
round向上的圆角
空值时，取全局配置的圆角。
string""
size百分比，数字字符或者带单位,
默认露出的内容高度
string"15%"
maxHeight弹层最大的高度值，默认为屏幕的可视高
提供值时不能为百分比，可以是px,rpx单位数字。如果你不带单位，默认转换为rpx单位。
string"80%"
triggerDy当拖动时，触发打开和关闭时的临界值，单位是px
如果没有达到此临界值时，将会回弹至原始位置。
number100
threshold当拖动时，如果已经达到了关闭和打开时的临界值时
可以继续拖拉时缓动阻尼值
number0.045
bgColor内容层的背景色
string"white"
darkBgColor暗黑的背景色,空时，取全局的sheetDarkColor
string""
actionColor拖动标题栏的横线背景色
string"#888888"
disabledScroll禁用内部的容器并采用view容器
booleanfalse
containerType没有禁用disabledScroll生效
容器内部使用的类型
scroll :scroll-view
list : list-view
string"scroll"
disabled是否禁用用户滚动等来触发关闭或者打开。
booleanfalse
zIndex层级
number100
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 方法 ​

名称参数返回值说明
setOpts---
callEmits---
setDisabledScolly---

示例文件路径 ​

json

/pages/fankui/float-drawer

示例源码 ​

uvue
vue
<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 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>

</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>
最近更新