初试小程序轮播组件

一、轮播组件

• swiper组件表示滑块视图容器，用于创建一块可以滑动的区域。swiper组件内部需要嵌套swiper-item组件，swiper-item组件表示滑块视图内容。swiper组件的默认高度为150px，默认宽度为100%。swiper-item组件的初始高度和初始宽度都为100%。

（一）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	当前所在滑块的index，默认为0	1.0.0
interval	number	5000	否	自动切换时间间隔	1.0.0
circular	boolean	false	否	是否采用衔接滑动	1.0.0

（二）swiper-item组件

1、功能描述

仅可放置在swiper组件中，宽高自动设置为100%。

2、属性说明

属性	类型	默认值	必填	说明	最低版本
item-id	string		否	该swiper-item的标识符	1.9.0
skip-hidden-item-layout	boolean	false	否	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息	1.9.0

（三）轮播组件使用基本语法

• swiper组件通过标签定义，swiper-item组件通过标签定义。

<swiper>
	<swiper-item>1</swiper-item>
	<swiper-item>2</swiper-item>
 	<swiper-item>3</swiper-item>
</swiper>

• swiper组件为外层容器，内层有3个swiper-item组件，表示当前滑块视图内容一共有3项。滑块视图内容在初始状态下只显示第1项，向左滑动显示第2项，再向右滑动可以返回第1项。

二、案例演示

（一）运行效果

• 三张图片，手动轮播
  

（二）实现步骤

1、创建小程序项目

• 项目名称：实现轮播图
• 模板选择：不使用模板
  
• 单击【确定】按钮
  

2、准备图片素材

• 在项目根目录里创建images目录，拷贝三张图片
  

3、编写轮播图页面内容

• 修改index.wxml文件
  

<!--index.wxml-->
<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<!--轮播图的结构-->
<swiper class="swiper-container" indicator-dots="true">
    <!--第一个轮播图-->
    <swiper-item>
        <view class="item">
            <image src="/images/spark.png" mode="scaleToFill" style="width: 100%; height: 100%;" />
        </view>
    </swiper-item>
    <!--第二个轮播图-->
    <swiper-item>
        <view class="item">
            <image src="/images/mysql.png" mode="scaleToFill" style="width: 100%; height: 100%;" />
        </view>
    </swiper-item>
    <!--第三个轮播图-->
    <swiper-item>
        <view class="item">
            <image src="/images/scala.png" mode="scaleToFill" style="width: 100%; height: 100%;" />
        </view>
    </swiper-item>
</swiper>

4、轮播图页面样式

• 修改index.wxss文件
  

/**index.wxss**/
.swiper-container {
    height: 150px;
}

.item {
    height: 100%;
    width: 100%;   
}

5、启动PC端自动真机测试

• 三张图片，手动轮播