小程序:滑块视图swiper

代码GitHub地址

一.基本实现

<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);
  }
})