大家好，又见面了，我是你们的朋友全栈君。
微信小程序轮播图实现详解
先上效果：
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属性则可以保证图片宽度随不同屏幕的变化而充满的情况下比例也不发生变化
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/143349.html原文链接：https://javaforall.net
