直播软件开发微信小程序：轮播图

基础知识：

swiper标签存在默认的宽度和高度：100% * 150px

swiper 高度 无法实现由内容撑开

先找出来 原图的宽度和高度，等比例 给 swiper 定 宽度和高度 原图的宽度和高度： 1125 * 352px swiper宽度 / swiper高度 = 原图的宽度 / 原图的高度 swiper高度 = swiper宽度 * 原图的高度 / 原图的宽度 height: 100vw * 352 / 1125

image标签也存在默认的宽度和高度：320px * 240px

图片标签：mode属性 渲染模式

widthFix 宽度不变，高度自动变化，保持原图宽高比不变 scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。（页面轮播图常用） 支持懒加载：小程序当中的图片 直接就支持 懒加载 lazy-load

lazy-load 会自己判断 当图片出现在视口上下三屏的高度之内的时候 自己开始懒加载图片

设计图片和轮播图：

原图的宽高：750px * 340px 想法：让图片的高度自适应；宽度等于100%

<!-- 轮播图 --> <view class="index_swiper"> <swiper autoplay="{{true}}" indicator-dots="{{true}}" circular="{{true}}"> <swiper-item wx:for="{{swiperList}}" wx:key="goods_id"> <navigator url="{{item.navigator_url}}" hover-class="navigator-hover" open-type="navigate"> <image src="{{item.image_src}}" mode="widthFix" lazy-load="false" /> </navigator> </swiper-item> </swiper> </view> .index_swiper { // swiper的宽高：原图的宽高 swiper{ width: 750rpx; height: 340rpx; image{ width: 100%; } } }