微信小程序开发，实现swiper轮播图

1. 官方文档指南

1. 滑块视图容器： https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
2. Image图片组件：https://developers.weixin.qq.com/miniprogram/dev/component/image.html

2. swiper视图容器

1. 功能描述：
   滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为

2. 通用属性：

属性	类型	默认值	必填	说明	最低版本
indicator-dots	boolean	false	否	是否显示面板指示点	1.0.0
indicator-color	color	rgba(0, 0, 0, .3)	否	指示颜色	1.1.0
indicator-active-color	color	#000000	否	当前中的指针颜色	1.1.0
autoplay	boolean	false	否	是否自动切换	1.0.0
current	number	0	否	当前所在滑块的 index	1.0.0
interval	number	5000	否	自动切换时间间隔	1.0.0
duration	number	500	否	动画时长	1.0.0
circular	boolean	false	否	是否采用衔接滑动	1.0.0
vertical	boolean	false	否	滑动方向是否为纵向	1.0.0
display-multiple-items	number	1	否	同时显示的滑块数量	1.9.9

更多详情，请阅读官方文档

3. image 媒体组件

1. 功能描述：
   图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0 起支持云文件ID。

• 使用 svg 格式且 mode=scaleToFill 时，WebView 会居中（除非 svg 里加上 preserveAspectRatio=“none”），Skyline 则会撑满
• svg 格式不支持百分比单位
• svg 格式不支持

2. 通用属性：

属性	类型	默认值	必填	说明	最低版本
src	string	-	否	图片资源地址	1.0.0
mode	string	scaleToFill	否	图片裁剪、缩放的模式	1.0.0
show-menu-by-longpress	boolean	false	否	长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单。	2.7.0
binderror	eventhandle	-	否	当错误发生时触发，event.detail = (errMsg)	1.0.0
bindload	eventhandle	-	否	当图片载入完毕时触发，event.detail = {height, width}	1.0.0

mode 合法值

合法值	说明	最低版本
scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素	-
aspectFit	缩放模式，保持纵横比缩放图片，使图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。	-
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。	2.10.3
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变	2.10.3
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变	2.10.3
top	截取模式，不缩放图片，只显示图片的顶部区域。仅 Webview 支持。	2.10.3
bottom	截取模式，不缩放图片，只显示图片的底部区域。仅 Webview 支持。	2.10.3
center	截取模式，不缩放图片，只显示图片的中间区域。仅 Webview 支持。	2.10.3
left	截取模式，不缩放图片，只显示图片的左边区域。仅 Webview 支持。	2.10.3
right	截取模式，不缩放图片，只显示图片的右边区域。仅 Webview 支持。	2.10.3
top left	截取模式，不缩放图片，只显示图片的左上边区域。仅 Webview 支持。	2.10.3
top right	截取模式，不缩放图片，只显示图片的右上边区域。仅 Webview 支持。	2.10.3
bottom left	截取模式，不缩放图片，只显示图片的左下边区域。仅 Webview 支持。	2.10.3
bottom right	截取模式，不缩放图片，只显示图片的右下边区域。仅 Webview 支持。	2.10.3

温馨提示
1. image组件默认宽度320px、高度240px
2. image组件进行缩放时，计算出来的宽高可能带有小数，在不同webview内核下渲染可能会被抹去小数部分

4. 代码实现过程

1. index.wxml

<!--index.wxml-->
<navigation-bar title="购物商城" back="{{false}}" color="#ffffff" background="#f3514f"></navigation-bar>
<scroll-view class="scrollarea" scroll-y type="list">
  <view class="swiper">
    <swiper autoplay="true" indicator-dots="true" indicator-active-color="#f3514f">

     <swiper-item>
       <image src="https://img.zcool.cn/community/0101d75d709f3ca801202f177e96ba.gif" mode="aspectFill"/>
     </swiper-item>

      <swiper-item>
        <image src="https://img.zcool.cn/community/012b4858bd040ea801219c77167f68.jpg@1280w_1l_2o_100sh.jpg" mode="aspectFill" />
      </swiper-item>

      <swiper-item>
        <image src="https://i2.wp.com/img-blog.csdnimg.cn/20200517184939657.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTAyODQ0,size_16,color_FFFFFF,t_70" mode="aspectFill" />
      </swiper-item>


      <swiper-item>
        <image src="https://img.zcool.cn/community/0121e65c3d83bda8012090dbb6566c.jpg@3000w_1l_0o_100sh.jpg" mode="aspectFill" />
      </swiper-item>
    </swiper>
  </view>
</scroll-view>

2. index.wxss

swiper{
  height: 360rpx;
}
swiper-item image{
  width: 100%;
  height: 100%;
}

5. 运行效果图