这篇文章主要介绍了解决vue使用vant轮播组件swipe + flex时文字抖动问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
原抖动效果
改后效果
解决方法
在外层容器的css里加上：transform: translateZ(0);
部分页面代码
<div class="d-meet-top"> <div> <span class="gray s-text">今天</span><span class="gray" style="color:#111111;font-weight:bold;letter-spacing: -1px"> {{item.startTime}} <span class="gray" style="margin:0 .5rem">―</span> {{item.endTime}} </span></div> <div class="d-status green"> <span>进行中</span></div></div><div class="d-meet-top"> <div> <span class="gray s-text">{{item.location}}</span></div><div> <span class="gray s-text" style="margin-left:0">参会人</span><span class="s-name"> {{data.substring(0,1)}}</span>3 || <a>本文来源gao*daima.com搞@代#码&网6</a>true" name="ellipsis" color="#AEAEB0"/></div></div>
部分css代码
.d-meet-top { display: flex; justify-content: space-between; transform: translateZ(0); // 《== 关键 } .d-meet-top div { display: flex; align-items: center; }
ps：下面看下vue-轮播图导致下方文字抖动问题
在使用vantui的swipe组件时遇到下方文字抖动的问题
解决方案：在样式里加入 transform: translateZ(0)
<div class="swipe-img-container"> </div>
/deep/ .van-swipe { text-align: center; background-color: white; transform: translateZ(0); }
以上就是解决vue使用vant轮播组件swipe + flex时文字抖动问题的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：解决vue使用vant轮播组件swipe + flex时文字抖动问题
转载请注明原文链接：解决vue使用vant轮播组件swipe + flex时文字抖动问题
