swiper标签
文档:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| indicator-dots | boolean | false | 否 | 是否显示面板指示点 | 1.0.0 |
| indicator-color | color | rgba(0, 0, 0, .3) | 否 | 指示点颜色 | 1.1.0 |
| indicator-active-color | color | #000000 | 否 | 当前选中的指示点颜色 | 1.1.0 |
| autoplay | boolean | false | 否 | 是否自动切换 | 1.0.0 |
| current | number | 0 | 否 | 当前所在滑块的 index | 1.0.0 |
| interval | number | 5000 | 否 | 自动切换时间间隔 | 1.0.0 |
| duration | number | 500 | 否 | 滑动动画时长 | 1.0.0 |
| circular | boolean | false | 否 | 是否采用衔接滑动 | 1.0.0 |
| vertical | boolean | false | 否 | 滑动方向是否为纵向 | 1.0.0 |
| previous-margin | string | "0px" | 否 | 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 | 1.9.0 |
| next-margin | string | "0px" | 否 | 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 | 1.9.0 |
| snap-to-edge | boolean | "false" | 否 | 当 swiper-item 的个数大于等于 2，关闭 circular 并且开启 previous-margin 或 next-margin 的时候，可以指定这个边距是否应用到第一个、最后一个元素 | 2.12.1 |
| display-multiple-items | number | 1 | 否 | 同时显示的滑块数量 | 1.9.0 |
| easing-function | string | "default" | 否 | 指定 swiper 切换缓动动画类型 | 2.6.5 |
| bindchange | eventhandle | 否 | current 改变时会触发 change 事件，event.detail = {current, source} | 1.0.0 | |
| bindtransition | eventhandle | 否 | swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy} | 2.4.3 | |
| bindanimationfinish | eventhandle | 否 | 动画结束时会触发 animationfinish 事件，event.detail 同上 | 1.9.0 |
easing-function 的合法值
| 值 | 说明 | 最低版本 |
|---|---|---|
| default | 默认缓动函数 | |
| linear | 线性动画 | |
| easeInCubic | 缓入动画 | |
| easeOutCubic | 缓出动画 | |
| easeInOutCubic | 缓入缓出动画 |
实践
在app.json中新建新的页面：
"pages": [
"pages/demo/demo",
"pages/index/index",
"pages/news/news",
"pages/logs/logs"
],使用轮播:
<swiper class="">
<swiper-item>
<image src="http://qiniu.justinwuwei.cn/u=1320234356,1982981646&fm=11&gp=0.jpg"></image>
</swiper-item>
<swiper-item>
<image src="http://qiniu.justinwuwei.cn/u=1320234356,1982981646&fm=11&gp=0.jpg"></image>
</swiper-item>
<swiper-item>
<image src="http://qiniu.justinwuwei.cn/u=605429972,1351316434&fm=26&gp=0.jpg"></image>
</swiper-item>
</swiper>
发现swiper标签默认对图片进行大小的限制，所以要用wxss指定其大小。
wxss:
.banner{
width: 360rpx;
border:1px solid red;
}
.banner image{
width: 100%;
height:360rpx;
}
指示点
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| indicator-dots | boolean | false | 否 | 是否显示面板指示点 | 1.0.0 |
| indicator-color | color | rgba(0, 0, 0, .3) | 否 | 指示点颜色 | 1.1.0 |
| indicator-active-color | color | #000000 | 否 | 当前选中的指示点颜色 | 1.1.0 |
循环播放
| circular | boolean | false | 否 | 是否采用衔接滑动 | 1.0.0 |
|---|
自动播放
| autoplay | boolean | false | 否 | 是否自动切换 | 1.0.0 |
|---|
前后间隔
| previous-margin | string | "0px" | 否 | 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 | 1.9.0 |
|---|---|---|---|---|---|
| next-margin | string | "0px" | 否 | 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 | 1.9.0 |
但是希望将轮播两边的间隔变成空白，需要对swiper-item进行样式设计。
wxml:
<swiper class="banner"
indicator-dots
autoplay
circular
previous-margin="20rpx"
next-margin="20rpx"
>
<swiper-item class="bannerItem">
<image src="http://qiniu.justinwuwei.cn/u=1320234356,1982981646&fm=11&gp=0.jpg"></image>
</swiper-item >
<swiper-item class="bannerItem">
<image src="http://qiniu.justinwuwei.cn/u=1320234356,1982981646&fm=11&gp=0.jpg"></image>
</swiper-item>
<swiper-item class="bannerItem">
<image src="http://qiniu.justinwuwei.cn/u=605429972,1351316434&fm=26&gp=0.jpg"></image>
</swiper-item>
</swiper>wxss:
.banner{
width: 750rpx;
border:1px solid red;
}
.banner image{
width: 100%;
height:360rpx;
}
.bannerItem{
padding: 0 20rpx; /* 间距设置*/
box-sizing: border-box; /* 内填充*/
}
此处评论已关闭