1.0.4 • Published 3 years ago
jiuwei-swptest v1.0.4
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;
}