基础知识:
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 会自己判断 当图片出现在视口上下三屏的高度之内的时候 自己开始懒加载图片
设计图片和轮播图:
<!-- 轮播图 --> <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%; } } }
微信小程序:轮播图
最新推荐文章于 2024-08-21 17:47:57 发布