vant中，对popup弹出层中的元素使用position:fixed定位不生效

已于 2022-09-18 00:12:50 修改
阅读量2.3k 收藏 1
点赞数 2
文章标签： html 前端
于 2022-09-18 00:11:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ddd239/article/details/126912432
版权

  • 弹出层在开发中运用的较多，写一个移动端项目时，发现自己封装的NavBar导航栏，无法van-popup弹出层中使用fiexd属性定位，始终无法固定到顶部。

  • 经过浏览器调试查看，发现弹出层 transform 属性，(c3的 transform属性，对元素 fixed 定位有影响，会使 fiexd 定位失效)

  • 于是将 transform 属性设置为 none (如果有多个弹出层，给需要修改的弹出层添加类名，再进行修改样式，防止污染正常的部分)

 

  •  NavBar导航栏能固定到顶部了，新的问题来了，右侧弹出的动画没了，弹出层时凭空出现，交互突兀，体验差。

  •  最后将 弹出层 由右侧弹出 改为 底部弹出（稍微变通了一下，NavBar导航栏能固定在顶部了，弹出动画也有了）

  • 这是一个笨方法，如果在座各位陈冠希,鞠婧祎有更好的方法，教教我

荨麻疹.
关注
解决Vant popup组件里面定位不生效的问题
wabcainiao的博客
11-19 2020
解决vant popup定位失效的问题
vant weapp弹出层popup使用窗口定位绝对定位无效解决办法！
海贼王某人的博客
09-30 3806
最近开发小程序，用的vant weapp框架，使用弹出层时，需要在底部固定一个输入框，效果如下：但我发现在popup组件里使用fixed定位无效，解决办法也很简单，把需要定位的元素放在popup组件外，这样就可以了，显示隐藏直接和控制弹出层的变量绑定同一个值就可以了！ 如果有更好的解决办法，欢迎大佬留言！ ...
vue Vant的Popup弹出层滚动问题，底部元素fixed定位异常问题
coldriversnow的专栏
12-21 1419
最近开发移动端h5，用的vant 移动端组件库框架，使用popup弹出层时，需要在底部固定一个操作模块。但我发现在popup组件里使用fixed定位后，如果内容没有超出popup高度，底部fixed内容显示正常，否则内容超出出现滚动条后，底部fixed定位元素随页面滚动，fixed失效。效果如下：正常情况和异常情况对比图（左正右异）：解决办法有两种方式。
vant组件popup顶部和底部固定元素
weixin_66892551的博客
10-28 5634
如果popup里面的内容超出他的高度,用f12审查可以看到popup的位置是在移动的,所以使用sticky组件或者fixed属性都没有效果,其实只要限制popup无法滚动,在popup中设置一个父盒子和一个子盒子,父盒子设置不能滚动,子盒子设置高度和可以滚动,再给需要固定的元素设置绝对定位就可以相对于父盒子固定。
移动端vant的弹出层(Popup)位置设置为左边和右边踩坑解决
Noctis99的博客
04-13 2669
需要把width加上,切height设置为100%。 即可
vant weapp: 关于在微信小程序中使用vant weapp的popup弹出层不生效
qq_56427133的博客
02-02 1258
根据官方的文档，先在app.json或者index.json中引入组件。仔细观察发现，官方案例中还使用了ban-cell，也需要在组件注册时注册。只需要在app.json或者index.json中再添加一下代码即可。然后在视图层wxml文件中添加。但是此时页面并没有使用成功。在js文件中添加以下代码。
【小程序】小程序使用vant Weapp的popup时，设置position:fixed无效的问题
要做一条翻身的咸鱼
12-19 899
小程序使用vant Weapp的popup时，设置position:fixed无效的问题
Vant2的Popup弹出层滚动问题IOS底部fixed定位失效问题
qq_31065757的博客
05-09 2943
Vue，Vant2的Popup弹出层滚动问题IOS底部fixed定位失效问题
vant弹出层popup无法挂载到指定节点
最新发布
qq_43222063的博客
04-25 731
在使用vant的popup组件时，希望其只显示在某个div中，否则连标题栏也遮盖住了，使用vant自带的属性，发现并不生效。通过控制台可以看出，popup已经挂载上去了，但popup的样式为position:fixed，这显然不合理，此时，popup内容的位置已经正常，但遮罩层位置还不对，用下组件自带的方法，完整代码如下。解决办法，只能自己修改样式了。页面也没有达到期望的效果。
解决VantUI popup 弹窗不弹出或无蒙层的问题
01-18
背景 ####组件PopupTime.vue 把vant官网的popup+时间选择器抽成组件： popup1show: true 即弹窗显示 <van-datetime-picker show-toolbar :title=popupTitle.popupName v-model=
微信小程序弹出层，右上角关闭按钮
07-14
点击弹窗按钮则弹出信息，点击右上角关闭按钮则关闭弹出层，弹出后遮盖层部分不可点击，无上拉下滑操作。用作于提示，展示列表，添加内容等操作。
关于popup的使用
11-26
关于popup的简单使用，popup是原先baidu使用的一个js，呵呵
在vant中使用时间选择器和popup弹出层的操作
01-21
我就废话不多说了，大家还是直接看代码吧~ 选择日期 value=datetime click=showDatePicker> <van-popup v-model=showDatePicker position=bottom :style={ h
vant中使用时间选择器和popup弹出层
dawnStart的博客
03-26 4812
<template> <divclass="page"> <van-cell-group> <van-cell title="选择日期" :value="datetime" arrow @cl...
vanpopup 高度_Vant Popup 弹出层
weixin_39911475的博客
12-21 4724
介绍弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示引入import Vue from 'vue';import { Popup } from 'vant';Vue.use(Popup);代码演示基础用法通过v-model控制弹出层是否展示展示弹出层内容export default {data() {return {show: false}},methods: {showPopup...
vant框架使用Popup 弹出层时,固定定位和绝对定位在苹果真机层级会高于Popup弹窗问题
caikys的博客
07-22 3217
vant框架使用Popup 弹出层时,固定定位和绝对定位在苹果真机层级会高于Popup弹窗问题
vanpopup 高度_van-popup使用van-nav-bar头部或底部无法固定问题
weixin_39636333的博客
12-30 2327
一直遇到一个问题，使用vant弹框里面有顶部导航栏和底部导航栏的时候，如果数据量多需要滚动页面的情况下，底部和顶部导航栏的位置会跟随移动。找了好久 一直没有找到解决的办法。今天自己终于弄出来了。主要步骤：1.首先给van-popup设置overflo:hidden(关键-不要让外层滚动)2. 给你需要滚动的层加高度，并且加overflo:auto 就可以了title="全部回复"class="db...
BUG解决：微信小程序调用vantweapp遮罩层popup 更改show后没反应，弹框/遮罩层不隐藏，show失效
weixin_45752941的博客
02-10 8681
微信小程序调用vantweapp遮罩层popup 更改show后没反应，弹框/遮罩层不隐藏，show失效
vant-popup弹出层用法
10-20
Vant是一个基于Vue.js的移动端组件库，其中包含了Popup弹出层组件。使用Vant的Popup弹出层组件可以方便地实现弹出层的功能，具体用法如下： 1. 引入Vant组件库和样式文件。 2. 在需要使用弹出层的地方添加Popup组件，并设置相应的属性，如position、show、close-on-click-overlay等。 3. 在Popup组件中添加需要显示的内容。 4. 在Vue实例中添加相应的方法，用于控制弹出层的显示和隐藏。 下面是一个简单的例子： ``` <template> <div> <van-button @click="showPopup">显示弹出层</van-button> <van-popup v-model="show" position="center" :close-on-click-overlay="false"> <div>这是弹出层的内容</div> <van-button @click="hidePopup">关闭弹出层</van-button> </van-popup> </div> </template> <script> import { VanPopup, VanButton } from 'vant'; export default { components: { VanPopup, VanButton, }, data() { return { show: false, }; }, methods: { showPopup() { this.show = true; }, hidePopup() { this.show = false; }, }, }; </script> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值