uniapp开发微信小程序之u-popup的滚动条

最新推荐文章于 2024-09-26 17:23:15 发布

原创最新推荐文章于 2024-09-26 17:23:15 发布 · 3.5k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #微信小程序 #小程序

uniapp 专栏收录该内容

10 篇文章

订阅专栏

在开发微信小程序时，作者使用uview的UI组件库遇到问题，因为弹出层默认靠内容撑起高度。为实现固定高度且内容超出时滚动的效果，作者在u-popup上设置了overlayStyle以阻止触摸动作，然后在内部需要滚动的盒子上设定固定高度和超出滚动。CSS部分通过设置`height`、`overflow-y`和`overscroll-behavior`实现了内容滚动功能。

开发微信小程序用的UI组件库是uview，第一次用，有点别扭，这个弹出层没有设置弹出层高度的方法，靠内容撑起高度；我的实现目标是高度固定，内容超出固定高度是，内容滚动。
在u-popup标签上先设置overlayStyle=“{‘touch-action’:‘none’}”，然后在u-popup中需要滚动的盒子，设置高度，超出高度就滚动。具体代码如下：

<template>
	<view class="body">
		<u-popup :show="show" :round="15" :overlayStyle="{'touch-action':'none'}" mode="bottom" @close="close" @open="open">
				<view class="popup_box">
					<view class="scrool">
					
					</view>
				</view>
		</u-popup>
	</view>
</template>

css 部分

<style lang="scss" scoped>
.scrool{
			height: 700rpx; // 固定高度
			overflow-y: scroll; // 超出滚动
			overscroll-behavior: none; // 禁止滚动溢出
		
		}
</style>