top-dropdown

top-dropdown:顶部下拉弹层

组件结构

<template>
	<view>
		<view
			class="tui-top-dropdown tui-dropdown-box"
			:class="[show ? 'tui-dropdown-show' : '']"
			:style="{
				height: height ? px(height) : 'auto',
				backgroundColor: backgroundColor,
				paddingBottom: px(paddingbtm),
				transform: 'translateZ(0) translateY(' + (show ? px(translatey) : '-100%') + ')'
			}"
		>
			<slot></slot>
		</view>
		<view @touchmove.stop.prevent class="tui-dropdown-mask" :class="[mask && show ? 'tui-mask-show' : '']" @tap="handleClose"></view>
	</view>
</template>

组件脚本

<script>
	export default {
		name: 'tuiTopDropdown',
		props: {
			//是否需要mask
			mask: {
				type: Boolean,
				default: true
			},
			//控制显示
			show: {
				type: Boolean,
				default: false
			},
			//背景颜色
			backgroundColor: {
				type: String,
				default: '#f2f2f2'
			},
			//padding-bottom  rpx
			paddingbtm: {
				type: Number,
				default: 0
			},
			//高度 rpx
			height: {
				type: Number,
				default: 580
			},
			//移动距离 需要计算
			translatey: {
				type: Number,
				default: 0
			}
		},
		methods: {
			handleClose() {
				if (!this.show) {
					return;
				}
				this.$emit('close', {});
			},
			px(num) {
				return uni.upx2px(num) + 'px';
			}
		}
	};
</script>

组件样式

... 此处省略n行

脚本说明

props

参数 类型 描述 默认值
mask Boolean 是否需要遮罩 true
show Boolean 控制显示 false
backgroundColor String 弹层背景颜色 #f2f2f2
paddingbtm Number padding-bottom 单位rpx 0
height Number 高度 单位rpx 580
translatey Number 移动距离 0

methods

名称 描述
@close 关闭弹层

示例

H5预览地址

https://www.thorui.cn/h5/#/pages/extend/popup/popup

H5二维码

小程序二维码