小程序09-swiper组件

滑块视图容器，微信内置的轮播图组件；其中只可放置swiper-item（轮播项）组件，否则会导致未定义的行为。

4.1 计算swiper的高度(swiper高度 = swiper宽度 * 原图的高度 / 原图的宽度)

　　swiper标签 存在默认样式，其中width为 100%，height为 150px，swiper高度无法根据内容自动撑开，需要根据原图的宽度和高度，等比例的计算出swiper的高度

　　由 swiper宽度 / swiper高度 = 原图的宽度 / 原图的高度   变形得  swiper高度 = swiper宽度 * 原图的高度 / 原图的宽度

如下代码实例中的图片宽高为 1920 * 1080，swiper宽度为750rpx = 100vw，所以 swiper高度 = 750rpx * 1080 / 1920  或者 100vw * 1080 / 1920

 

4.2 swiper属性

属性	类型	默认值	必填	说明
autoplay	boolean	false	否	是否自动切换
interval	number	5000	否	自动切换时间间隔
circular	boolean	false	否	是否采用衔接滑动
indicator-dots	boolean	false	否	是否显示面板指示点
indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色
indicator-active-color	color	#000000	否	当前选中的指示点颜色
current	number	0	否	当前所在滑块的 index
duration	number	500	否	滑动动画时长
vertical	boolean	false	否	滑动方向是否为纵向
previous-margin	string	"0px"	否	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
next-margin	string	"0px"	否	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
display-multiple-items	number	1	否	同时显示的滑块数量
skip-hidden-item-layout	boolean	false	否	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息
easing-function	string	"default"	否	指定 swiper 切换缓动动画类型
bindchange	eventhandle		否	current 改变时会触发 change 事件，event.detail = {current, source}
bindtransition	eventhandle		否	swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}
bindanimationfinish	eventhandle		否	动画结束时会触发 animationfinish 事件，event.detail 同上

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

swiper.wxml

<!-- 轮播图 -->
<swiper autoplay interval="1000" circular indicator-dots indicator-color="#1296db" indicator-active-color="aqua" current="1" duration="1000">
  <swiper-item>
    <image src="http://browser9.qhimg.com/bdr/__85/t0183def7a3a7924215.jpg"></image> 
  </swiper-item>
  <swiper-item>
    <image src="http://browser9.qhimg.com/bdr/__85/t019fd908f724f51900.jpg"></image> 
  </swiper-item>
  <swiper-item>
    <image src="http://browser9.qhimg.com/bdm/480_296_0/t01ae215b5ab138cc49.png"></image> 
  </swiper-item>
</swiper>

 

swiper.wxss

swiper{
  height:calc(100vw * 1080 / 1920);
}
image{
  width: 100%;
  height: 100%;
}