微信小程序轮播图实现详解

微信小程序轮播图实现详解

先上效果：

wxml代码：

<swiper autoplay interval="2000" circular indicator-color="#0094ff" indicator-dots indicator-active-color="#ff0094">
<!--swiper默认高度已经写死，无法改变、无法由内容撑开-->
<swiper-item><image mode="widthFix" src="../../1615170298216.jpg"></image></swiper-item>
<swiper-item><image mode="widthFix" src="../../1615129804530.jpg"></image></swiper-item>
<swiper-item><image mode="widthFix" src="../../1615129805097.jpg"></image></swiper-item><!--swiper 默认width:100%,默认hight:150px-->
</swiper>  

大体框架：
主要运用swiper组件，swiper作为轮播图外层容器，swiper-item用于存放轮播图片，最后加上各种属性即完成轮播图

swiper属性：
autoplay:是否自动切换；
interval:自动切换时间间隔/单位ms
circular:是否循环轮播；
indicator-dots:是否显示面板指示点；
indicator-color：指示点颜色；
indicator-active-color：当前选中的指示点颜色；

重难点：轮播图屏幕适配：

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

1. 必须要重置swiper高度，因为swiper高度无法由image内容撑开，根据公式：

swiper宽度/swiper高度=原图宽度/原图高度

而swiper宽度为不同屏幕的宽度，可设置为100vw，故求出swiper对应的高度即可

2. 图片的宽度与swiper-item一致,swiper-item宽度又与swiper一致，swiper宽度随不同屏幕变化而变化，最后给image标签增加widthFix属性则可以保证图片宽度随不同屏幕的变化而充满的情况下比例也不发生变化