使用vue-awsome-slider进行轮播图的制作:
遇到的问题:
1.当网速较慢是,轮播图片是可替代资源,在页面显然时,会先将页面中静态的内容渲染上去,等数据返回后,在进行重新渲染,这样页面就会出现抖动,影响用户体验,同时性能也比较低。
这时应该在轮播图组件外加一个div(wrapper)标签,这样在下面书写样式
可以用下面的css代码对这些可替换资源先进行占位,页面大体框架在第一次渲染后就能呈现给用户,数据获取到后,替换相应的内容就可,就不会出现抖动了。
. wrapper
overflow: hidden
width: 100%
height: 0
padding-bottom: 图片宽高比
2.样式穿透
轮播图中点的颜色是在slider子组件中的,所以在这个组件中进行样式设定对子组件不起左右
在子组件中实现在这样的布局,需要用到样式穿透,不然是无法滚动下半部分的。
.wrapper >>> .swiper-pagination-bullet-active
background: #fff
进行子组件的样式穿透