解决vue使用vant轮播组件swipe + flex时文字抖动问题


Posted in Vue.js onJanuary 07, 2021

原抖动效果

解决vue使用vant轮播组件swipe + flex时文字抖动问题

改后效果

解决vue使用vant轮播组件swipe + flex时文字抖动问题

解决方法

在外层容器的css里加上:transform: translateZ(0);

部分页面代码

<van-swipe-item v-for="(item,index) in meetingList" :key="index">
   <div class="d-meet-top">
     <div>
      <van-icon name="clock" class="v-icon" color="#AEAEB0"/>
      <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>
      <van-icon name="location" class="v-icon" color="#AEAEB0"/>
      <span class="gray s-text">{{item.location}}</span>
     </div>
     <div>
      <span class="gray s-text" style="margin-left:0;">参会人</span>
      <span class="s-name" v-for="(data,index) in item.person" :key="index"> {{data.substring(0,1)}}</span>
      <van-icon v-if="item.person.length>3 || true" name="ellipsis" color="#AEAEB0"/>
     </div>
  </div>
</van-swipe-item>

部分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)

<van-swipe :autoplay="3000">
 <van-swipe-item v-for="(swipeItem,index) of swipeList" 
 :key="index"
 @click="bannerJump(swipeItem.imgUrl,swipeItem.bannerId)">
 <div class="swipe-img-container">
  <img v-lazy="swipeItem.img" class="swipe-img">
 </div>
 </van-swipe-item>
</van-swipe>
/deep/ .van-swipe {
    text-align: center;
    background-color: white;
    transform: translateZ(0);
  }

到此这篇关于解决vue使用vant轮播组件swipe + flex时文字抖动问题的文章就介绍到这了,更多相关vue使用vant轮播组件文字抖动内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
详解Vue的mixin策略
Nov 19 Vue.js
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
如何实现vue的tree组件
Dec 03 Vue.js
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
vue 数据操作相关总结
Dec 17 Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
vue监听键盘事件的相关总结
Jan 29 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
vuex的使用和简易实现
Jan 07 #Vue.js
vue watch监控对象的简单方法示例
Jan 07 #Vue.js
vue.js watch经常失效的场景与解决方案
Jan 07 #Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 #Vue.js
如何在vue-cli中使用css-loader实现css module
Jan 07 #Vue.js
vue3中轻松实现switch功能组件的全过程
Jan 07 #Vue.js
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 #Vue.js
You might like
PHP 图片上传实现代码 带详细注释
2010/04/29 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
php通过排列组合实现1到9数字相加都等于20的方法
2015/08/03 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
zShowBox 图片放大展示jquery版 兼容性
2011/09/24 Javascript
jquery设置控件位置的方法
2013/08/21 Javascript
jQuery获得内容和属性示例代码
2014/01/16 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
jQuery判断checkbox选中状态
2016/05/12 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
AngularJS指令用法详解
2016/11/02 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
vue中实现在外部调用methods的方法(推荐)
2018/02/08 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
详解python中的Turtle函数库
2018/11/19 Python
分析运行中的 Python 进程详细解析
2019/06/22 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
法国珠宝店:CLEOR
2017/01/29 全球购物
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
幼儿教师个人求职信范文
2013/09/21 职场文书
大学生关于奋斗的演讲稿
2014/01/09 职场文书
党员干部公开承诺书
2014/03/26 职场文书
企业党员个人自我评价
2014/09/20 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书