下载并引入,初始化插件之后,建立swiper 组件,注意,在template结构中有一个自定义属性option,我们要将option绑定的数据传入。
注意输出name属性要和需要引入此模板的页面import的板块名称相等
解决加载图片时会出现的抖动感(图片一开始高度为0,图片加载出来之后为图片高度),原理就是宽度设置百分之百,然后保持宽高百分比
width:100%;
height: 0;
padding-bottom: 31.25%;(宽高百分比)
overflow: hidden
简写:
width: 100%;
height: 31.25vm;
vm:相对于视口的百分比,但是有兼容问题
为banner添加小圆点:
如果想要改变小圆点的颜色,只针对小圆点的样式进行覆盖是无用的,原因是vue中scoped表示只针对当前页面的样式有效,而圆点的类名是swiper组件来控制其样式的,所以,需要使用穿透符号,>>>,表示banner-main下面的类名样式进行强制更改。
网友评论