前些天绘制轮播图时，发现轮播图中不同span标签内（样式不同）文字上下跳动。
为了防止眩晕在岗位上，需要对其进行改善，试了很多种方法，最后来总结一下：
我的轮播图template代码片段：
<div class='timer_shanxi_screen_outter'><div class="timer_shanxi_screen"><div v-for='item,index in [...(dataChart?.dataList||[]),...(dataChart?.dataList||[])]' class='subject-card'><div class='subject_index'>{{ (((index)%(dataChart.dataList.length)+1)>9?'':'0')+((index)%(dataChart.dataList.length)+1) }}</div><div class='subject_number'>{{ item[0] }}</div><div style='width: 150px;text-align: left;'><span style='color: rgba(255, 173, 57, 1);font-size: 20px;vertical-align: middle;margin: 0 4px;'>{{ item[1] }}</span><span style='position: relative; top: 2px;'>元</span></div><div><span style='position: relative; top: 2px;'>库存</span><span style='color: rgba(255, 173, 57, 1);font-size: 20px;vertical-align: middle;margin: 0 4px;'>{{ item[2] }}</span></div></div></div>
</div>（vue框架）data参考：
data: function () {return {// 定时器本器timmer: '',// 当前滚动top值currentTop: 0,dataChart: {dataList: [["蛋糕","22","5件"],["饼干","49","2件"],["蛋挞","19","8件"],["可乐","10","4件"],["荔枝","5","23件"],["巧克力","17","7件"],["冰淇淋","9","4件"],["仙人掌","22","1件"],["土豆雷","3","50件"]]}}
},定时器方法参考：
this.timmer = window.setInterval(() => {this.currentTop-=1;if(document.querySelector('.timer_shanxi_screen')) {let timer_shanxi_screen = document.querySelector('.timer_shanxi_screen');let aimDomHeight = window.getComputedStyle(timer_shanxi_screen).height.split('px')[0]/2+5;if(aimDomHeight+this.currentTop<=0) {this.currentTop = 0}timer_shanxi_screen.style.transform = 'translateY('+this.currentTop+'px) translateZ(0) translate3d(0, 0, 0)';} else {window.clearInterval(this.timmer);}
},25)实现方法：
1.首先将定时器外部容器添加下列属性，提升渲染的品质，以解决闪烁问题（会略降性能）：
.timer_shanxi_screen_outter {/* 。。。*/position: relative;transform: translate3d(0, 0, 0);-webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; }2.将每个滚动的元素，除了translateY变动外，再额外添加两个条件（见上面的定时器方法图）:
translateZ(0) translate3d(0, 0, 0)3.此时若内部还有标签闪动，对改标签追加下列属性,举例说明:
.subject-card div span {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}然后闪动的问题就应该已经得到改善了。
希望本文会对您有所帮助~ ^_^
