vue项目——banner图加载优化+＜transition-group＞组件实现轮播

vue官方文档关于列表过渡的介绍

轮播图的过渡效果都是由以下的class切换实现的，需要有所了解，详细到上面链接的官网查看。

过渡的类名

在进入/离开的过渡中，会有 6 个 class 切换。
v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 ，则 v- 是这些类名的默认前缀。如果你使用了 ，那么 v-enter 会替换为 my-transition-enter。

html

 <div class="bannerShuff" ref="banner">
 	<transition-group tag="ul" class='slide-ul' name="list">
 	<!-- 设置了name="list",下面的类名都为list开头 -->
 		<li v-for="(item,index) in bannerImgArray" :key="index" v-show="bannerNum==index">
	 		<div style="position: absolute; z-index: 2; width: 100%; height: 100%;">
	 			<div class="bannerText">banner图上如果有文字放这</div>
	 		</div>
	        <img id="bannerImg" width="100%" :src="item.src" />
        </li>
    </transition-group>
    <ul class="bannerIndex">
    	<li v-for="(item,index) in bannerImgArray" :key="index" :class="index==bannerNum?'bannerIndexOn':'bannerIndexLi'"></li>
    </ul>
  </div>

js

export default{
	data(){
		return{
			bannerNum: 0, //用来控制图片显示
			// 轮播图片数组
			bannerImgArray:[
		        {
		          src: require('@/assets/img/模糊图1.jpg'),
		        },
		        {
		          src: require('@/assets/img/模糊图2.jpg'),
		        },
		        {
		          src: require('@/assets/img/模糊图3.jpg')
		        }
      		],
		},
		method:{
			 // banner轮播
    		bannerShuff(){
    		//定时5s滑动一次
      			this.timer= setInterval(this.autoPlay,5000);
    		},
    		autoPlay(){
	      		this.bannerNum++;
	      		if(this.bannerImgArray.length === this.bannerNum){
	        		this.bannerNum = 0;
      			}
    		}，
    		// banner高度自适应，因为banner图宽度自适应屏幕宽度，如果固定高度，图片会显示不全，所以获取宽度*宽高比来设置高度，就能等比缩放图片
    		autoHeight(){
      			let that = this;
      			that.$refs.banner.style.height = this.$refs.banner.clientWidth * (高/宽) + 'px';
    		}
		}
	}，
	mounted() {
    	this.changeBanner(); //优化图片加载显示
    	this.$nextTick(function (){
    	//监听窗口变化，因为只调用一次autoHeight获取的是第一次进入页面时浏览器的宽度，如果窗口变化，高度不会随之改变，所以对窗口变化进行监听，只要有变化，就再次调用
      		window.onresize = () => {
          		this.autoHeight();
      		}
      	this.autoHeight();
      	this.bannerShuff();
    })
  },
  beforeDestroy() {
  //销毁定时器
    clearInterval(this.timer);
  }
}

css

.bannerText{ /* 文字的样式 */
  width: 1200px;
  margin: 0 auto;
  font-size: 48px;
  color: #FFFFFF;
  line-height: 67px;
  position: relative;
  text-align: left;
  padding-top: 12%;
}
.bannerShuff{
  position: relative;
  width: 100%;
  height: 460px;
  overflow: hidden;
}
.slide-ul{
  width: 100%;
  height: 100%;
}
.slide-ul li{
  position: absolute;
  width: 100%;
  height: 100%;
}
/* 图标样式 */
.bannerIndex{
  min-width: 1200px;
  left: 43%;
  position: absolute;
  bottom: 38px;
  z-index: 30;
}
.bannerIndexLi{
  position: relative;
  top: -1px;
  float: left;
  margin-right: 5px;
  width: 60px;
  height: 5px;
  background: rgba(255,255,255,0.5);
}
.bannerIndexOn{
  position: relative;
  top: -1px;
  float: left;
  margin-right: 5px;
  width: 60px;
  height: 5px;
  background: #fff;
}
/* 过渡样式 */
.list-enter-to{
  transition: all 1s ease;
  transform: translateX(0);
}
.list-leave-active{
  transition: all 1s ease;
  transform: translateX(-100%);
}
.list-enter{
  transform: translateX(100%);
}
.list-leave{
  transform: translateX(0);
}

实现图片优化加载

如果banner图太大，会导致加载过慢，用户体验不好，可以先加载模糊图，在原图加载完成后替换成清晰图，模糊图就是对图片进行压缩后的，可以缩小图片大小，降低分辨率等

// banner优化
    changeBanner(){
      let that = this;
      let img = new Image();
      img.src = require('@/assets/img/原图.jpg');
      //这里三张都是同一张图，不同图可增加image
      img.onload = function (){
        that.bannerImgArray[0].src = img.src;
        that.bannerImgArray[1].src = img.src;
        that.bannerImgArray[2].src = img.src;
      }
    }