u-popup,不希望出现滚动条

一、描述

在开发过程中使用u-view里面的u-popup,有时候会出现滚动条,比如我只想做一个弹窗,而不想弹窗中还有滚动条,在美观上过不去。并且内容也没多到需要滚动才能显示所有。先看图吧:

html 复制代码
<u-popup v-model="show" mode="center" border-radius="16" width="690" height="auto">
			<view class="tip">
				<view class="tip-title">
					领取提示
				</view>
				<view class="tip-text">
					领取案源后可在律师端【我的】页面查看已领
				</view>
				<view class="sure-tip">
					确定领取该案源?
				</view>
				<view class="tip-btns">
					<view class="cancel-btn">
						取消
					</view>
					<view class="sure-btn">
						确定
					</view>
				</view>
			</view>
		</u-popup>

主要是这行:

html 复制代码
<u-popup v-model="show" mode="center" border-radius="16" width="690" height="auto">

二、调试

我想会不会是auto导致的,给他固定值看看:

一样会有,既然出现了滚动条看看,是不是其他元素给他顶开了,审查一下元素的样式:

去掉margin看看呢:

竟然没了,那就是这个鬼margin捣乱的,但是我元素没有边距了,我使用padding给他撑开一下先,界定一下边界。

再试下具体的margin?

把值改大点,超过padding值,再看看效果:

也没事啊,那就假设在容器外边包一层padding可以解决这个问题,不让他出现滚动条。

相关推荐
IT_陈寒5 分钟前
Vue这个坑我跳了两次,原来问题出在这
前端·人工智能·后端
kyriewen8 分钟前
我用 50 行代码重写了 React Router 核心,终于搞懂了前端路由原理
前端·javascript·react.js
人活一口气1 小时前
Spring Boot与AIGC的完美结合:从零搭建智能内容生成平台
java·spring boot·aigc
WebInfra1 小时前
Rspack 2.1 发布:React Compiler 提速 10 倍!
前端
李明卫杭州1 小时前
CSS 媒体查询详解:一文掌握响应式设计的核心技术
前端
lichenyang4532 小时前
从 H5 按钮到 OpenHarmony 能力调用:我如何理解 ASCF 的运行链路
前端
下家2 小时前
我放弃了 Vue/React,选择自研框架
前端·前端框架
Asize3 小时前
HTML5 Canvas 基础:从按帧动画到 ECharts 数据可视化
前端·javascript·canvas
像我这样帅的人丶你还3 小时前
Java 后端详解(三):全局异常处理与 JPA 数据库映射
java·后端
默_笙3 小时前
🎄 后端给我一堆扁平数据,我 10 行代码把它变成了树
前端·javascript