微信小程序轮播图制作（小白开发日记学习开发微信小程序第五天）

微信小程序轮播图制作（小白开发日记学习开发微信小程序第五天）不同的是，微信官方重新封装了image标签，并在原来html的基础上实现了很多新的功能。微信小程序的image标签同在html中一样，都是用于存放图片的标签。这个可以看看我上一篇文章，里面有详细的代码。那么我们今天主要来学习什么呢？既然有了容器，我们需要往里面放东西，最常用的就是放图片，这就用到image标签。

大家好，我是蜗牛，因为公司项目的问题，一直没来得及写文章。。。实在是惭愧。

废话不多说，今天记录的是微信小程序的首页轮播图制作及图片设置。

看过微信官方文档的童鞋们都知道，微信官方给微信小程序提供了swiper组件(滑块视图容器)来给开发者制作轮播图，不用开发者自己造轮子。

swiper 滑块视图容器

如何使用swiper视图容器

这个可以看看我上一篇文章，里面有详细的代码。

那么我们今天主要来学习什么呢？

既然有了容器，我们需要往里面放东西，最常用的就是放图片，这就用到image标签。

关于image标签

微信小程序的image标签同在html中一样，都是用于存放图片的标签。

不同的是，微信官方重新封装了image标签，并在原来html的基础上实现了很多新的功能。

使开发过程更加快速，便捷。

具体例子

实现效果：

轮播图最终效果

代码部分：

// swiper-item标签 一定在 swiper标签中 // 同时，控制轮播图是否有指示点、是否自动切换等属性写在swiper标签中 // swiper标签的属性： circular，打开滑动衔接； indicator-dots，显示面板指示点 <swiper indicator-dots="true" circular="true"> <swiper-item> // image标签中常用属性有：src，图片资源地址；*mode，图片剪裁、缩放模式(最常用的属性) <image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596651207743&di=a746440bfa30b1ec728102bcdc78e4d9&imgtype=0&src=http://www.bianji.net/uploadfiles/images/2018/0724/f12ac92b73c963c646a8bfec9f1756dc.png" mode ="widthFix"></image> </swiper-item> <swiper-item></swiper-item> <swiper-item></swiper-item> <swiper-item></swiper-item> </swiper>如何设置图片大小不会导致图片发生形变

• image组件默认宽度320px，高度240px
• mode属性有几种常用的值：
• scaleToFill：缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
• aspectFit：缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
• aspectFill：缩放模式，保持纵横比缩放图片，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
• widthFix：缩放模式，宽度不变，高度自动变化，保持原图宽高比不变。
• heightFix：缩放模式，高度不变，宽度自动变化，保持原图宽高比不变。（需2.10.3基础库）
• 当图片有留白的时候，可以设置image的style属性，将height或者witch设置为100%。
• 设置后如发现图片被拉伸，则需要裁剪或者重新按比例缩放图片。

总结

今天改公司项目bug的时候，发现原本使用的背景设置轮播图的形式太麻烦，而且不知道为什么，轮播图更新后，ios端无法及时显示，即便按照网上的方法删除小程序，也还是原来的轮播图。。。

但安卓端就没有这个问题，奇怪。

好的，这就是今天的内容。

如果对你有帮助的，麻烦点个赞点个关注吧~谢谢Thanks♪(･ω･)ﾉ