vant组件popup顶部和底部固定元素

问题:

如果popup里面的内容超出他的高度,用f12审查可以看到popup的位置是在移动的,所以使用sticky组件或者fixed属性都没有效果

方案:

限制popup无法滚动,在popup中设置一个父盒子和一个子盒子,父盒子设置不能滚动,子盒子设置高度和可以滚动,再给需要固定的元素设置绝对定位就可以相对于父盒子固定

效果

html

  <van-popupv-model:show="showPopup"position="bottom"round:style="{ height: '17rem', overflow: 'hidden' }"><div class="popup_box"><div class="popup_top"><div class="title">筛选条件</div><van-icon name="cross" @click="showPopup = false" /></div><div class="popup_bottom"><div class="reset_btn">重置</div><div class="confirm_btn">完成</div></div><div class="popup_main"><div v-for="(item, index) in 40" :key="index">好高大上的共和国的发掘进口的发掘卡迪夫</div></div></div></van-popup>

css

.popup_box {height: 17rem;background-color: #fff;padding-top: 1.28rem;padding-bottom: 1.31rem;overflow: hidden;position: relative;.popup_top {width: 10rem;height: 1.28rem;position: absolute;top: 0;display: flex;align-items: center;.van-icon-cross {font-size: 0.43rem;color: #181818;margin-left: 3.21rem;}.title {margin-left: 4.15rem;height: 0.43rem;font-family: PingFangSC-Medium;font-weight: 500;font-size: 0.43rem;color: #181818;line-height: 0.43rem;}}.popup_bottom {width: 10rem;height: 1.31rem;position: absolute;bottom: 0;display: flex;.reset_btn {width: 4rem;height: 1.31rem;background: #fff;}.confirm_btn {width: 6rem;height: 1.31rem;background: #f84730;}}.popup_main {height: 100%;overflow-y: scroll;background-color: #fcf;}
}

vant组件popup顶部和底部固定元素相关推荐

vant 组件Popup和DatetimePicker 在小程序的结合使用
如图,开始时间和结束时间复用一个时间组件,在每次点击选择时间时,应默认选中上次选择的时间,所以开始时间和结束时间应区分开来. 因为设计图的时间格式yyyy-mm-dd,获取的时间格式是 yyy/mm ...
如何设置顶部和底部固定，中间填满
如上图的样式,制作过程. HTML <div className="pageWrap"><MainHeader /><main className=& ...
datagrid底部显示水平滚动_CSS flex 布局，头部和底部固定，中间出现滚动条
文章目录原理说明案例(原理说明) 案例二(回字形布局) 案例 (计算出中间组件的高度,剩下的百分百) 原理说明利用flex布局,很容易实现"左右两边固定,剩余100%"的布局 ...
iOS 15.0+ 中 SwiftUI 顶部或底部悬浮功能小面板的极简实现
功能需求我们有时需要在 App 主视图的顶部或底部固定悬浮放置一个功能视图: 如上图所示,我们将一个列表项目输入小面板按需放在主视图的顶部或底部: 当放置在顶部时,解决了其对导航栏(Navigati ...
移动端基于Vant组件封装底部弹出搜索多选列表
移动端基于Vant组件封装底部弹出搜索多选列表: 效果图如下: 点击确定后赋值给表单使用到的组件:van-popup,van-search 组件页面代码:searchDataPopup.vue &l ...
vant 组件van-tabbar实现底部导航
vant 组件van-tabbar实现底部导航简单使用van-tabbar实现底部导航 1.创建底部导航组件 2.子页面引用优化van-tabbar使用 1.创建主页面 2.创建子模块 3.配置路 ...
html 鼠标和界面特效整理，L2Dwidget使用，固定图像背景，bootstrap固定div到顶部或底部
1.跟随鼠标移动的线条: <script>!function(){function n(n,e,t){return n.getAttribute(e)||t}function e(n){r ...
【CSS】图片底部空白缝隙处理 ( 使用居中对齐 / 顶部对齐 / 底部对齐 | 将行内元素 / 行内块元素转为块级元素 )
文章目录一.图片底部空白缝隙问题二.图片底部空白缝隙问题解决方案一 ( 使用居中对齐 / 顶部对齐 / 底部对齐 ) 三.图片底部空白缝隙问题解决方案二 ( 将行内元素 / 行内块元素转为块级元素 ...
小程序UI组件 Vant Weapp Popup弹出层和Picker选择器组合使用按钮被遮盖恢复不了的问题
Vant Weapp Popup弹出层和Picker选择器组合使用, 如果picker在popup上存在滚动条, 在开发者工具上鼠标可以滚动还原picker的确认和取消按钮位置, 但是在真机上,把p ...

vant组件popup顶部和底部固定元素

vant组件popup顶部和底部固定元素相关推荐

最新文章

热门文章