解决Vant popup组件里面定位不生效的问题

最新推荐文章于 2024-04-25 15:53:37 发布

前端菜鸟ycc

最新推荐文章于 2024-04-25 15:53:37 发布

阅读量2k

点赞数

文章标签：前端框架

本文链接：https://blog.csdn.net/wabcainiao/article/details/121424554

版权

当使用Vant的popup组件时，发现内部定位功能失效。为了解决这一问题，可以在popup组件内添加一个div作为包裹元素，并利用这个div进行定位。这样，通过调整div的样式，可以实现popup中的内容正确定位。

摘要由CSDN通过智能技术生成

<van-popup v-model="show1" position="left" :style="{width:'80%',height:'100%'}">

<van-index-bar v-model="show1">

<van-index-anchor index="A" />

<van-cell title="文本" />

<van-index-anchor index="B" />

<van-cell title="文本" />

<van-index-anchor index="C" />

<van-cell title="文本" />

<van-cell title=&#

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端菜鸟ycc

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

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

ddd239的博客

09-18

2361

vant中popup弹出层，position:fixed定位不生效

【小程序】小程序使用vant Weapp的popup时，设置position:fixed无效的问题

要做一条翻身的咸鱼

12-19

897

小程序使用vant Weapp的popup时，设置position:fixed无效的问题

2 条评论您还未登录，请先登录后发表或查看评论

微信小程序引入vant的Popup弹出层后，没有显示？

fangqi20170515的博客

10-12

3147

微信小程序引入vant的Popup弹出层后，没有显示？

解决VantUI popup 弹窗不弹出或无蒙层的问题

01-18

背景 ####组件PopupTime.vue 把vant官网的popup+时间选择器抽成组件： popup1show: true 即弹窗显示 <van-datetime-picker show-toolbar :title=popupTitle.popupName v-model=

vant weapp: 关于在微信小程序中使用vant weapp的popup弹出层不生效

qq_56427133的博客

02-02

1251

根据官方的文档，先在app.json或者index.json中引入组件。仔细观察发现，官方案例中还使用了ban-cell，也需要在组件注册时注册。只需要在app.json或者index.json中再添加一下代码即可。然后在视图层wxml文件中添加。但是此时页面并没有使用成功。在js文件中添加以下代码。

vant weapp弹出层popup使用窗口定位绝对定位无效解决办法！

海贼王某人的博客

09-30

3806

最近开发小程序，用的vant weapp框架，使用弹出层时，需要在底部固定一个输入框，效果如下：但我发现在popup组件里使用fixed定位无效，解决办法也很简单，把需要定位的元素放在popup组件外，这样就可以了，显示隐藏直接和控制弹出层的变量绑定同一个值就可以了！如果有更好的解决办法，欢迎大佬留言！ ...

BUG解决：微信小程序调用vantweapp遮罩层popup 更改show后没反应，弹框/遮罩层不隐藏，show失效

weixin_45752941的博客

02-10

8680

微信小程序调用vantweapp遮罩层popup 更改show后没反应，弹框/遮罩层不隐藏，show失效

Vant UI的index-bar( 索引栏 )组件中的anchor元素固定定位在Tab( 标签 )组件下失效的原因记录

CSDN_Sviexu的博客

12-09

2035

在用vant ui制作联系人列表的时候,在vant-tab组件下引用vant-index-bar组将, 发现index-anchor会跟随父元素一起滚动, 于是检查了anchor的样式 .van-index-bar__sidebar { position: fixed; top: 50%; right: 0; z-index: 2; display: flex; -webkit-box-orient: vertical; -webkit-box-d

vue vant Area组件使用详解

10-15

Vue Vant 是一款基于 Vue.js 的移动端 UI 组件库，提供了丰富的组件，用于构建美观且功能强大的移动应用。在 Vue Vant 中，`Area` 组件是一个用于选择省市区的组件，常用于地址选择等场景。这篇教程将详细介绍如何...

小程序使用Vant weapp的索引栏IndexBar无法正常跳转至对应锚点且底部异常

01-03

【问题】小程序使用Vant weapp的索引栏IndexBar组件无法正常跳转至对应锚点，且无变色效果，但滚动正常。 Vant UI库是采用dist文件引入的方式导入。按官方demo在xx.json引入组件 van-index-bar: ../../dist/index-bar/index, van-index-anchor: ../../dist/index-anchor/index xx.js文件 // 索引字母数组 const indexList = []; const charCodeOfA = 'A'.charCodeAt('0'); for (let

在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】

10-16

- 事件命名：在 mpvue 中使用 Vant Weapp 组件时，如果组件的事件命名中使用了减号（例如 `input-value`），直接使用会导致事件不生效。解决方法是修改组件库中的事件命名，将减号命名改为驼峰命名。具体操作是在 ...

nuxt+vant用来van-popup移动端滚动失效

weixin_45148145的博客

03-09

624

问题描述：移动端官网跳转路由后的页面，页面无法滚动

vant tabs组件滚动、吸顶效果失效

XNHYJSL的博客

05-11

3893

vant tabs组件设置sticky scrollspy 属性没有效果原因出在父元素不管是第几层的父元素overflow属性，overflow不能为auto和hidden 设置完可以正常吸顶和滚动

vant 中Tab 标签页使用sticky 粘性布局时,Tab吸顶后下不来或不灵敏的问题

weixin_50336510的博客

08-18

5301

【问题描述】使用vant中的Tab 标签页,当添加sticky 属性时,tab吸顶后不能随滚动条下来或者下来的不灵敏或者响应不及时【问题原因】是由于本人使用的前端框架，在公共样式中把body的样式设置了 overflow: scroll，导致了这个问题。经测试，overflow属性除了visible值可修复该问题外，其他属性均会导致这个问题的存在【解决方法】将overflow: scroll属性去掉，或改为overflow: visible。在需要使用tab标签页的页面中，单独修改body样式。

vant弹出层popup无法挂载到指定节点

最新发布

qq_43222063的博客

04-25

728

在使用vant的popup组件时，希望其只显示在某个div中，否则连标题栏也遮盖住了，使用vant自带的属性，发现并不生效。通过控制台可以看出，popup已经挂载上去了，但popup的样式为position:fixed，这显然不合理，此时，popup内容的位置已经正常，但遮罩层位置还不对，用下组件自带的方法，完整代码如下。解决办法，只能自己修改样式了。页面也没有达到期望的效果。

vue Vant的Popup弹出层滚动问题，底部元素fixed定位异常问题

我总是词不达意的博客

06-17

7256

vue Vant的Popup弹出层滚动问题，底部元素fixed定位异常问题。

解决vant 控件因为内容为绝对定位absolute 而导致的控件位置偏差问题

qq_56538005的博客

01-14

525

解决vant 控件因为内容为绝对定位absolute 而导致的控件位置偏差问题

关于uniapp引入Vant Weapp第三方组件，遇到的问题和解决方式

inticaler的博客

01-27

4676

1.在根目录下创建wxcomponents 2.引入vant weapp 1.我们到https://github.com/youzan/vant-weapp下载最新的压缩包 2.解压，将里面的dist文件夹复制粘贴到wxcomponents目录下,并改名为vant 3. 在根目录下App.vue中引入UI样式index.wxss，如下图 @import "/wxcomponents/vant/common/index.wxss"; 4. 在pages.json页面将vant的组件.

给vant组件添加动态calss不生效

04-05

可能是因为您没有正确使用Vant组件的class绑定方式。请参考下面的示例代码： ``` <template> <van-button :class="buttonClass">按钮</van-button> </template> <script> export default { data() { return { isActive: true, } }, computed: { buttonClass() { return { 'active': this.isActive, } }, }, } </script> <style> .active { background-color: red; } </style> ``` 在上面的示例中，我们使用了计算属性来动态生成class，然后将其绑定到Vant组件上。这样，当`isActive`为`true`时，按钮会添加`active`样式，背景色变为红色。您可以根据实际情况修改计算属性中的逻辑，实现您想要的动态class效果。