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

被折叠的 条评论
为什么被折叠?



