微信小程序学习笔记——常见组件【swiper】

swiper

滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

常用属性 

autoplay 自动轮播

interval 修改轮播时间

circular 衔接轮播

indicator-dots 显示 指示器 分页器 索引器

indicator-color 指示器的未选择时的颜色

indicator-active-color 指示器的选中时的颜色

属性	类型	默认值	必填	说明	最低版本
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
display-multiple-items	number	1	否	同时显示的滑块数量	1.9.0
skip-hidden-item-layout	boolean	false	否	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息	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	缓入缓出动画

change事件 source 返回值

从 1.4.0 开始，change事件增加 source字段，表示导致变更的原因，可能值如下：

1. autoplay 自动播放导致swiper变化；
2. touch 用户划动引起swiper变化；
3. 其它原因将用空字符串表示。

等比例计算swiper高度

1. 轮播图的外层容易 swiper
2. 每一个轮播项 swiper-item
3. swiper便签中 存在默认样式
   width 100%
   height 150px    
   image 存在默认宽高 320*240
   swiper无法实现由内容撑开
4. 先找出来 原图的宽高， 等比例给swiper定宽高
    原图的宽度和高度  700 * 277（原图是京东官网的轮播图）
    swiper宽度/swiper高度 = 原图的宽度/原图的高度
    swiper高度 = swiper宽度 * 原图高度 / 原图宽度
    height:750rpx*277/700  或者100vm*277/700 

5. 也可以做如下的处理   和上面的处理效果一样

         原图 640px * 200px

         让图片高度自适应 宽度100%  mode="widthFix"

        让swiper宽度为750rpx  高度为原图的高度

<!-- 
1. 轮播图的外层容易 swiper
2. 每一个轮播项 swiper-item
3. swiper便签中 存在默认样式
   width 100%
   height 150px    
   image 存在默认宽高 320*240
   swiper无法实现由内容撑开
4. 先找出来 原图的宽高， 等比例给swiper定宽高
  原图的宽度和高度  700 * 277
  swiper宽度/swiper高度 = 原图的宽度/原图的高度
  swiper高度 = swiper宽度 * 原图高度 / 原图宽度
  height:750rpx*277/700  或者100vm*277/700
 
 -->
<swiper autoplay interval="3000" circular indicator-dots indicator-color='#0094ff' indicator-active-color="#ff0094">
    <swiper-item>
        <image mode="widthFix" src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/113023/15/586/97530/5e8e85e5E1964d56c/70c5a8cd4d2d8d1a.jpg!cr_1125x445_0_171!q70.jpg.dpg" alt="" />
    </swiper-item>
    <swiper-item>
        <image mode="widthFix" src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/114669/38/1013/108609/5e93db07E85fb0d3b/000f8e8598187f7e.jpg!cr_1125x445_0_171!q70.jpg.dpg" alt="" />
    </swiper-item>
    <swiper-item>
        <image mode="widthFix" src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/95842/38/12546/80187/5e4ba3e7E09e0da3b/92aac67aefdf6b6f.jpg!cr_1125x445_0_171!q70.jpg.dpg" alt="" />
    </swiper-item>
</swiper>
  

/* pages/swiperPage/swiperPage.wxss */
swiper{
  width: 100%;
  height: calc(100vw * 277 / 700);
}
image{
  width: 100%;
}