begin

vuetify carouse轮播图的图片自动切换的时候, 会自动聚焦跳转到轮播图自身的位置.

这导致了一个问题, 当屏幕同时显示着轮播图和其他内容时, 轮播图一自动切换, 页面就会自动跳转到轮播图的位置!

!!!

紧急补充!

经过十个测特效的测试 https://vuetifyjs.com/zh-Hans/styles/transitions/

终于发现, 仅仅是几个特效( 比如是出问题的淡入特效 ) 在图片切换的时候会重新跳回去!!!

最终选择了这两个不会导致图片重新跳转到原位置的特效!

Solution1

Solution2

我在找问题的时候, 也发现了一个有趣的问题

如果有 v-container 标签包裹的带淡入特效的轮播图, 那么他会自动跳转如下问题重现:

https://codepen.io/syousui/pen/pogZKPV?editors=1010

那么这样解决方案就有了,

要么像 Solution1 那样删掉淡入特效,

https://codepen.io/syousui/pen/pogZKPV?editors=1010

要么就删掉 v-container.

https://codepen.io/syousui/pen/pogZKPV?editors=1010

链接进不去请自行科学上网处理

end

我的项目中, 我尝试删掉所有带自适应属性的标签来试图通过 Solution1 来解决, 但是并没有效果

最终只得删了淡入切换的特效…

这个问题困扰了好几天了, 今天终于一行一行, 一个属性一个属性注释, 总结到了上述几个经验

如有其他见解欢迎讨论!

Vuetify Carouse轮播图图片切换导致页面总是自动跳转到轮播图位置相关推荐

JS 轮播图图片切换（定时器）
标题JS 轮播图图片切换(定时器) 这次的轮播图与上次的图片切换相比,仅仅是加上了定时器,使其可以自动切换. 上次的图片切换的链接:https://blog.csdn.net/qq_38318589 ...
初试--轮播图--图片切换
尝试使用图片切换做轮播图 <style>*{margin: 0;padding: 0;list-style: none;}.box{width: 500px;height: 300px;p ...
CSS 图片浮动导致页面无垂直拓展
编写图片和文字横向排列的页面,当图片不是此div的结束标签时,div无法做到以图片大小自适应页面高度,而是以最后的文段为拓展延伸标准.(在div有背景颜色,或后面内容要对齐时造成影响) <bod ...
Ant Design Vue中tabs标签页切换导致页面变宽的问题
问题在使用Ant Design Vue进行开发的时候,使用了tabs标签页,在页里面套用了表格,但是在页面切换后,会发现页面的width会变大差不多2倍,这样会导致页面一些结构的样式发生变化. 解决 ...
jQuery带缩略图轮播效果图片切换带缩略图
以上为效果图 HTML代码: <!DOCTYPE html> <html><head><metacharset="utf-8" /> ...
html焦点图自动播放纯代码,jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)...
demo01.html 手动滚动图片 ul,li{margin:0;padding:0} img{border:0px;} #container{padding:40px;} #showArea im ...
VUE+ElementUi学习记录（一）tabs切换导致页面比例不自适应，包含echarts
问题 element-ui中使用tab切换v-chart,实现自适应布局解决方案根本原因,elementui的tab标签切换使用的是display:none; display:none; 这就导致 ...
使用双缓存贴图时切换时仍然会卡的解决方法，贴图之前用FillSolidRect()
//在贴图之前需要清除 pDC->FillSolidRect(0,0,m_ClientRect.Width(),m_ClientRect.Height(),RGB(255,255,255));
banner 获取当前指示物_Android轮播图图片的本地保存及读取
一.轮播图控件及图片加载对于Android端的轮播图控件,我这边选用的是banner库 //轮播图 compile 'com.youth.banner:banner:1.4.9' //Glide c ...

Vuetify Carouse轮播图图片切换导致页面总是自动跳转到轮播图位置

文章目录

begin

!!!

Solution1

Solution2

end

Vuetify Carouse轮播图图片切换导致页面总是自动跳转到轮播图位置相关推荐

最新文章

热门文章

Vuetify Carouse轮播图 图片切换导致页面总是自动跳转到轮播图位置

文章目录

begin

!!!

Solution1

Solution2

end

Vuetify Carouse轮播图 图片切换导致页面总是自动跳转到轮播图位置相关推荐

最新文章

热门文章

Vuetify Carouse轮播图图片切换导致页面总是自动跳转到轮播图位置

Vuetify Carouse轮播图图片切换导致页面总是自动跳转到轮播图位置相关推荐