Swiper
滑块视图容器
效果
安装
$ npm install quist-ui -D
引入
<import name="quist-swiper" src="@quist-ui/quist-swiper/index"></import>
例子
默认样式
<quist-swiper visible="{{true}}" options="{{imageList}}" @on-click="choose"></quist-swiper>
不轮询播放
<quist-swiper visible="{{true}}" is-loop="{{false}}" options="{{imageList}}" @on-click="choose"></quist-swiper>
自定义当前索引和非当前索引的背景色
<quist-swiper visible="{{true}}" options="{{imageList}}" @on-click="choose" selected-color="#ff0000" indicator-color="#fac450"></quist-swiper>
自动轮播且轮播时间设置为5s
<quist-swiper visible="{{true}}" is-auto-play="{{true}}" time="{{5000}}" options="{{imageList}}" @on-click="choose"></quist-swiper>
蒙层形式展示轮播图
<quist-swiper visible="{{swiperBig}}" type="pop" options="{{imageList}}" @on-click="close"></quist-swiper>
自定义蒙层背景颜色
<quist-swiper visible="{{swiperBigb}}" background="rgba(255, 255, 255, 1)" pop-pagination-color="#000000" type="pop" options="{{imageList}}"></quist-swiper>
更详细代码可以参考 quist-swiper demo
API
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
visible | Swiper 是否可见 | Boolean | false |
is-auto-play | 是否自动播放 | Boolean | false |
is-loop | 是否轮询播放 | Boolean | true |
time | 自动播放的时间 | Number | 3000 |
options | 轮播的模块 | Array | - |
show-indicator | 是否显示indicator | Boolean | true |
indicator-color | indicator的颜色 | String | #E1E1E1 |
selected-color | indicator当前的颜色 | String | #1890ff |
type | Swiper 展示的形式(当需要以蒙层形式展示时,务必传pop ) | String | ' ' |
background | 以蒙层形式展示时的背景色 | String | rgba(0, 0, 0, 1) |
pop-pagination-color | 以蒙层形式展示时的索引文字颜色 | String | #ffffff |
on-click | 点击当前轮播的回调 | Function | - |
更新日志
v1.0.0(2018-09-30)
- 初始版本
v1.0.9(2018-11-12)
- 更新了
Swiper
的展示形式及索引的样式