一.基本实现
<swiper>
<swiper-item></swiper-item>
</swiper>
- swiper: 父标签。其中只可放置<swiper-item/>组件，否则会导致未定义的行为。默认width:100%；height：150px；
- swiper-item: 子标签。 仅可放置在<swiper/>组件中，宽高自动设置为100%。
二. 属性说明
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| vertical | Boolean | false | 滑动方向是否为纵向 |
| indicator-dots | Boolean | false | 是否显示面板指示点。横向显示：指示点在低中部。纵向显示：指示点在右中部。 |
| indicator-color | Color | rgba(0, 0, 0, .3) | 未选中的指示点颜色 |
| indicator-active-color | Color | #000000 | 选中的指示点颜色 |
| autoplay | Boolean | false | 是否自动轮播 |
| interval | Number | 5000ms | 自动轮播的时间间隔 |
| duration | Number | 500ms | 轮播的动画时长 |
| circular | Boolean | false | 是否衔接循环滑动 |
| previous-margin | String | "0px" | 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 |
| next-margin | String | "0px" | 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 |
| display-multiple-items | Number | 1 | 同时显示的swiper-item的数量 |
| current | Number | 0 | 当前所在滑块的 index。 设置该属性，可以让swiper默认显示第几个元素，注意不要数组越界。 |
| current-item-id | String | "" | 当前所在滑块的 item-id ，不能与 current 被同时指定. 需要指定current-item-id为某一个swiper-item的item-id，不要指定到一个不存在的item-id |
| 事件名 | 类型 | 说明 |
|---|---|---|
| bindanimationfinish | EventHandle | 轮播动画结束时会触发 animationfinish 事件。即监听滑动到第几个item的事件。 |
| bindchange | EventHandle | current 改变时会触发 change 事件 |
两者基本没有什么区别。
四. 其他
点击事件 ： 点击某一个swiper跳转页面
// wxml
<swiper catchtap="onItemClick">
<swiper-item>
<view data-postId="10"></view>
</swiper-item>
</swiper>
// js
onItemClick:function(event) {
// 获得到点击的swiper-item进行页面跳转处理，这里用模态展示效果
wx.showToast({
icon: "none",
title: "postid=" + event.target.dataset.postid,
})
}
五. 可运行代码
- wxml
<view class="container">
<swiper class="swiper" indicator-dots autoplay circular indicator-color='gray' indicator-active-color='red' interval="3000" bindchange="bindchange" bindanimationfinish="animationfinish" catchtap="onItemClick" current-item-id="{{index}}">
<swiper-item item-id="0">
<view class="swiper-item swiper-item-zero" data-postId="0">第0个</view>
</swiper-item>
<swiper-item item-id="1">
<view class="swiper-item swiper-item-one" data-postId="1">第1页</view>
</swiper-item>
<swiper-item item-id="2">
<view class="swiper-item swiper-item-two" data-postId="2">第2页</view>
</swiper-item>
</swiper>
</view>
- wxss
.swiper {
background-color: red;
width: 50%;
height: 200px;
}
.swiper-item {
text-align: center;
line-height: 200px;
}
.swiper-item-zero {
background-color: yellow;
}
.swiper-item-one {
background-color: orange;
}
.swiper-item-two {
background-color: greenyellow;
}
- js
Page({
data: {
index: 1 // 默认滑动到第几页
},
onLoad: function (options) {
},
bindchange: function (event) {
console.log("bindchange");
console.log(event);
},
onItemClick: function (event) {
wx.showToast({
icon: "none",
title: "postid=" + event.target.dataset.postid,
})
},
animationfinish: function (event) {
console.log("animationfinish");
console.log(event);
}
})
