小程序:滑块视图swiper

一.基本实现

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

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

文章转载于:https://www.jianshu.com/p/bba4a2f2597d

原著是一个有趣的人,若有侵权,请通知删除

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了，原文地址《小程序:滑块视图swiper》