大家好，又见面了，我是你们的朋友全栈君。
以微信小程序为例:
wxml文件:
<!--
1.轮播图外层容器 swiper
2.每一个轮播项 swiper-item
3.swiper标签 存在默认样式
1.width 100%
2.height 150px image 存在默认宽度和高度 320* 240
3.swiper 高度无法实现由内容撑开
4.先找出来 原图的宽度和高度 等比例 给swiper 定 宽度和高度
原图的宽度和高度 750 x 300
swiper 宽度 / swiper 高度 = 原图的宽度 / 原图的高度
swiper高度 = swiper宽度 * 原图的高度/ 原图的宽度
height : 100%*300/750
5.autoplay 自动轮播
6.interval 修改轮播时间
7.circular 自动衔接轮播,这样就不会穿帮
8.indicator-dots 显示 指示器 分页器 索引器
9.indicator-color 指示器的未选择的颜色
10.indicator-active-color 选中的指示器的颜色
-->
<swiper indicator-dots="true" indicator-active-color="#ff0094" indicator-color="#fff" autoplay="true" interval="3000" circular="true">
<swiper-item>
<image mode="widthFix" src="https://cdn.uviewui.com/uview/swiper/1.jpg"></image>
</swiper-item>
<swiper-item>
<image mode="widthFix" src="https://cdn.uviewui.com/uview/swiper/2.jpg"></image>
</swiper-item>
<swiper-item>
<image mode="widthFix" src="https://cdn.uviewui.com/uview/swiper/3.jpg"></image>
</swiper-item>
</swiper>
wxss文件:
/*给轮播图设定宽度为100%,高度通过计算得出*/
swiper{
width: 100%;
/* 300你的图片的高度, 750你的图片的宽度 ,100vw为显示屏幕的宽度*/
height: calc(100vw * 300 / 750);
}
/*给图片设定宽度为100%*/
image{
width: 100%;
}未添加样式前:
添加样式且计算高度后:
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/143452.html原文链接：https://javaforall.net
