竖向公告轮播组件

anli.png

此竖向公告轮播组件使用起来灰常简单，符合大众公告样式，如果没有特殊需求，不必花费大量时间阅读Swiper冗杂的官方文档，现导即用。极大的节省开发时间！

组件在npm上的地址
安装方式：yarn add jiuwei-swptest
在main.js中引入：

import JWSwiper from 'jiuwei-swptest' 
import VueAwesomeSwiper from 'vue-awesome-swiper'
 
import 'swiper/dist/css/swiper.css'
 
Vue.use(VueAwesomeSwiper)
Vue.use(JWSwiper)
 
/* 因为引用了vue-awesome-swiper和Swiper ,在yarn后会自动安装到项目中，但是必须在main.js中全局引用*/

在项目中使用：

<template>
  <div class="hello">
    <div class="top">
      <jiuwei-swp :jiuweiSList="jiuweiSList">
      </jiuwei-swp>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "swiper-example-vertical",
  title: "Vertical slider",
  data() {
    return {
        jiuweiSList: [
            {
                "name": "张*三138****7623 刚刚已投保",
                "id": 1
            },
            {
                "name": "王*旭139****4086 刚刚已投保",
                "id": 2
            },
            {
                "name": "徐*138****7753 刚刚已投保",
                "id": 3
            },
            {
                "name": "张*138****7753 刚刚已投保",
                "id": 4
            }
        ],
    };
  }
};
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.top {
  width: 100%;
  height: 266px;
  background: peru;
}
 
</style>

组件暴露了一些基本的属性参数可供配置，如果不做任何配置，也可以正常使用，不过都是默认样式

• jiuweiSList：Array 数组数据，默认为空数组
• slidesPerView：Number 可视范围内显示几个单元，默认为2
• spaceBetween：String 单元之间的间距，传百分比，默认为15%
• wantUsePxSpace：Array 如果间距想用px单位，这里传true
• usePxBetween：Boolean 如果wantUsePxSpace传了true，这里 传Number值，比如20，间距就是20px
• speed：Number 轮播速度，默认为800
• autoplay：Number 暂停时间，默认为3000
• isUnWorkAutoplay：Boolean 如果不滚动，这里需要传true
• updateAutoplay：Array isUnWorkAutoplay为true的时候，这里传暂停时间，比如3000

关于修改swiper-slide的颜色，没有提供修改颜色的参数配置，不过可提供直接在父视图进行修改的两种方案=>深度修改样式：

/* 修改轮播单元的颜色 */
/* top是父组件的class */
.top >>> .recommendPage .swiper-container .swiper-slide{
    background: yellowgreen;
}  

如果是有些像 Sass、less 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 操作符取而代之——这是一个 >>> 的别名，同样可以正常工作。如下：

/* top是父组件的class */
.top /deep/ .recommendPage .swiper-container .swiper-slide {
    background: yellowgreen;
}
/* 修改轮播最顶部的单元颜色 */
.top /deep/ .recommendPage .swiper-container .swiper-slide-active {
  background: rgba(76, 77, 255, 0.27) !important;
}
/* 修改轮播最顶部的即将消失的单元的颜色 */
.recommendPage .swiper-container .swiper-slide-prev {
  background: rgba(76, 77, 255, 0.27) !important;
}

考虑到有些项目可能会使用rem单位，或者是px2rem-loader等全局转换px单位的插件，所以容器位置以及容器的宽度和高度，如果需要修改默认样式，也建议在父视图深度修改样式

.top /deep/ .recommendPage {
    top: 114px;
    right: 16px;
}
.top /deep/ .recommendPage .swiper-container {
    width: 172px;
    height: 48px;
}
.top /deep/ .recommendPage .swiper-container .swiper-slide { 
    width: 172px;
}