美文网首页Vue移动端
轮播插件vue-awesome-swiper2018-11-27

轮播插件vue-awesome-swiper2018-11-27

作者: TTTXTTT | 来源:发表于2018-12-14 10:43 被阅读44次

    下载并引入,初始化插件之后,建立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下面的类名样式进行强制更改。

    相关文章

      网友评论

        本文标题:轮播插件vue-awesome-swiper2018-11-27

        本文链接:https://www.haomeiwen.com/subject/rcngqqtx.html