七、微信小程序-快速回顾 ( swiper 轮播图、scroll-view 可滚动视图区域 )

一、swiper 轮播图

轮播图是项目中最常见的功能，很多项目都会在首页中使用轮播图，我们传统的 web 项目中想使用一个较完美的轮
播图，要么手写，要么引入第三方组件，而微信小程序中，默认给我们提供了一个轮播图组件，使用起来非常方便，
本节就快速回顾一下微信小程序中轮播图的使用

1.1. swiper 基本使用

微信小程序中使用轮播图，需要 <swiper> 和 <swiper-item> 两个标签搭配使用，<swiper> 为个轮播图的最外层结
构，轮播图中的每一项则需要嵌套在 <swiper-item> 标签内

可以通过属性对 <swiper> 进行控制，本文列举一些最常用的属性，想学习更多的属性，请参照 微信小程序 -
swiper 轮播图组件：

属性名	取值	描述
indicator-dots	布尔	是否显示轮播图下方的指示点
indicator-color	rgba 格式字符，如 “rgba(255,0,0,0.3)”	不处于激活状态时的指示点颜色
indicator-active-color	十六进制颜色字符，如 “#ccc”	处于激活状态时的指示点颜色
autoplay	布尔	轮播图是否自动播放
interval	数值	自动播放时，切换图片的时间间隔，毫秒单位
circular	布尔	衔接滑动，在最后一张图片时仍可以继续向后滑动回到第一张图片

示例：使用 swiper 轮播图组件：

(1) 创建 /images 目录，并放入三张图片，一会用来当轮播图内容

(2) 在页面逻辑中定义数组，用来保存轮播图图片列表

Page({
   
  data: {
   
    // 轮播图图片列表
    swiperList: [
      '../../images/banner1.png',
      '../../images/banner2.png',
      '../../images/banner3.png']
  }
})

(3) 在页面布局文件中，使用轮播图组件，内容为前面定义的轮播图图片列表

<!-- 自动播放、有指示点的轮播图组件 -->
<swiper indicator-dots="true" autoplay="true">
  <swiper-item wx:for="{
    {swiperList}}" wx:for-item="banner" wx:key="*this">
    <image src="{
    {banner}}"></image