前叙
mint-ui组件库中swipe组件,实现的是常见的轮播图效果。但是它的实现方式,和常见的实现有所不同。
常见的实现方式: 通过移动轮播图的wrapper来实现item的切换效果(也就是修改wrapper的translate3d属性来实现)。如果支持循环播放,需要在首部插入一个最后一个轮播图item的clone版,以及在尾部插入一个第一个轮播图item的clone版。
swipe组件实现的方式: 只显示当前显示的轮播图item,当切换的时候,显示出当前item的前后相邻的两个item;通过设置三个item的translate3d来实现切换的效果。
两个实现方式的对比:
- 第一种方式,初始会渲染出所有的item,通过translate3d来实现切换和滑动,这种方式会启动硬件加速提升性能。但是毕竟是在所有轮播图的基础上的渲染。
- 第二种方式,通过切换item的display属性来实现对应item的显示和隐藏,虽然会引起回流和重绘,但是每个item的position为absolute,脱离文档流,所以并不会引起其他dom的回流和重绘。每个item的translate3d引发的渲染只是在当前item的基础上。
- 通过上面分析,可以得出: 如果轮播图的数量不多,第一种方式不会引起回流和重绘,并且translate引发渲染的item不多,性能相对好;但是轮播图的数量比较多的话,第二种性能相对比较好。
swipe接入示例
html代码
<div id="app"> <div class="swipe-wrapper"> <mt-swipe :auto="0" ref="swipeWrapper"> <mt-swipe-item class="swip-item-1 item">1</mt-swipe-item> <mt-swipe-item class="swip-item-2 item">2</mt-swipe-item> <mt-swipe-item class="swip-item-3 item">3</mt-swipe-item> </mt-swipe> </div> <div class="button-wrapper"> <button class="prev-button flex-item" @click="prev">prev</button> <button class="next-button flex-item" @click="next">next</button> </div> </div>
css代码
<!-- 引入组件库css --> <link rel="stylesheet" href="../css/mint-style.css"> <style> html,body{ width: 100%; height: 100%; margin: 0; } #app{ width: 100%; height: 100%; } .swipe-wrapper{ width: 100%; height: 300px; } .swip-item-1{ background: red; } .swip-item-2{ background: blue; } .swip-item-3{ background: green; } .item{ text-align: center; font-size: 40px; color: white; } .button-wrapper{ display: flex; height: 100px; } .flex-item{ flex: 1; display: inline-block; text-align: center; height: 100%; line-height: 100%; font-size: 40px; } .prev-button{ background: darkorange; } .next-button{