今天在看一个慕课网上的视频时,遇到了一个小问题,问题是在我们使用轮播图插件vue-awesome-swiper时,发现轮播图分页器pagination的当前页的小圆点显示为蓝色,但是设计稿中显示为白色,效果如图
视频中的
因为在当前组件中的样式,我们使用了scoped属性锁定了样式作用域,所以我们要想修改这个样式就需要一些特殊设置,在视频中使用是stylus,所以它使用的是stylus的样式穿透

stylus样式穿透 >>>

  .wrapper >>> .swiper-pagination-bullet-active
    background: #fff

但是我因为stylus找不到合适的版本,我在自己的项目中使用了less对CSS样式进行预处理,为了实现这一效果我去查阅了官网,并没有发现解决方式,最后在学习群中,群友给了解答方式,下面是less的样式穿透

less样式穿透 使用 /deep/

//结构,.wrapper 是最外层的,不一定是要最外层,和类选择器一样,.swiper-pagination-bullet-active,想改的类
 
 .wrapper /deep/ .swiper-pagination-bullet-active{
     background-color: #fff;
 }

修改后的效果如下图
在这里插入图片描述

最后把这个组件的代码附上

<template>
<!-- 如果我们不给轮播图的最外层加一个div.wrapper,并给其设置对应的样式的话
    在Fast 3G网络下,我们的轮播图下面的内容在加载时会出现跳动
 -->
    <div class="wrapper">
        <swiper ref="mySwiper" :options="swiperOption">
            <swiper-slide>
                <img class="swiper-img" src="https://imgs.qunarzz.com/piao/fusion/1505/27/301e8692d285a3.jpg">
             </swiper-slide>
            <swiper-slide>
                <img class="swiper-img" src="http://imgs.qunarzz.com/piao/fusion/1505/81/9b243e59bf9dd.jpg">
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
            <!-- 左右箭头 -->
            <!-- <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div> -->
            <!-- <div class="swiper-scrollbar" slot="scrollbar"></div> -->
        </swiper>
    </div>
</template>
<script>
export default {
  name: 'HomeSwiper',
  // 单文件组件中的data必须是一个函数,下面是es6的写法
  data () {
    return {
    //   如果我们想要轮播图上的原点,我们就要添加pagination配置项  把显示圆点的div类名传进来
      swiperOption: {
        pagination: '.swiper-pagination'
      }
    }
  }
}
</script>
<style lang="less" scoped>
.wrapper /deep/ .swiper-pagination-bullet-active{
    background-color: #fff;
}
.wrapper{
    overflow: hidden;
    // 下面三句相当于width:20.84vw
    width: 100%;
    height: 0;
    // 这个20.84%是相对于width 也是相对于视口
    background-color: #ececec;
    padding-bottom: 20.84%;
    .swiper-img{
        width: 100%;
    }
}

</style>

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐