零基础学习微信小程序（四）

零基础学习微信小程序之实现轮播图

因为不会自制动图，所以只能这样截图演示了，不过按照我的代码是一定可以实现的！

一、首先要知道轮播图是两层构成

外层容器----- swiper
每一个轮播项： swiper-item
在中间放图片即可！

<swiper> 
 	<swiper-item>   
 		<image/>
	</swiper-item>   
</swiper>

二、样式注解：

autoplay 默认5秒钟 
interval 停留时间以毫秒为单位
circular 衔接轮播 
indicator-dots 面板分页器 
indicator-color 分页器未选中的颜色 
indicator-active-color 分页器 选中时的颜色

三、图片转换：

不是任何一个图片拿来就能用，我们需要让图片在wxss中做个变换
才能做出轮播图的效果！！

先找出原图宽高 等比例      然后给 swiper 定宽高
        swiper 宽度 / swiper 高度 = 原图 宽度 / 原图 高度
        swiper 高度 = swiper 宽度 * 原图的 高度 / 原图 的 宽度    
        举个例子：
        	原图640px*200px
       		height=100vw * 200 / 640

swiper标签 默认样式

    1 width 100%
    2 height 150px image  存在默认宽高 320*240
    3 swiper高度 是无法由内容自动撑开的                                                                   

四、图片设置：

为了避免图片格式大占地方，我们首先要将图片上传到某个图床中，然后保存链接就可以了

保存好链接后，就可以开始在wxml中敲代码了

然后看看图片的大小进行调整

在wxss中进行转换，公式在上面说过，套用一下就好了

轮播图大功告成！

标签：原图,indicator,轮播,微信,程序,学习,宽度,swiper,图片
来源： https://blog.csdn.net/qq_45320932/article/details/114801645