携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情
本次系列文章参与八月的更文活动，记录一个微信小程序从零到有的开发过程。本文为本系列第六篇：了解微信小程序中的一些常见且需要注意的标签
image标签
image标签有一个重要的属性，即mode
如何理解呢？
可以把image标签分为两个部分来理解，和h5中的div+背景图片一样。分为相框和图片内容部分
widthFix用得比较多。- 图片内容等于相框的宽度、
- 图片的高度会跟随图片内容的宽度，等比例发生变化
- 这个属性的效果其实就是等于web中图片的默认效果，高度等比例变化
- scaleToFill 默认值
- 把图片内容填充满相框，不保持宽高比例
- aspectFit 用得比较多
- 等比例拉伸图片内容
- 相框会完全的包住图片内容
- aspectFill
- 等比例拉伸图片内容
- 图片内容会填充满相框
swiper标签
关于具体用法参照文档demo即可。但是需要特别注意的是，swiper标签默认的高度 150px，当它和图片一起使用的时候 经常需要再算一下 swiper标签的高度
那么该如何理解和计算呢？
-
swiper轮播图的默认高度是150px,一般情况下，容器的高度由内容撑开，但微信小程序中的swiper标签无法实现这个效果
-
swiper-item循环化：高度和宽度都是100%，大小由swiper标签来控制
-
swiper-item 放入image
-
那么如何实现swiper标签的高度可以跟随图片的高度变化而变化呢？
swiper标签的高度 = image 标签的高度
原图的宽度(已知)/原图的高(已知) = 变化后的图片的宽(100% 750rpx)/变化后的图片的高度
变化后的图片的高度 = 750rpx*原图的高/原图的宽度(已知)
