1.0.4 • Published 3 years ago

jiuwei-swptest v1.0.4

Weekly downloads
20
License
-
Repository
-
Last release
3 years ago

jiuwei-swptest

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

安装方式: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中全局引用/

> 在项目中使用:
```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;
}
1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago