微信小程序（第八章）- 轮播图的实现

前言

微信小程序比我们上一章讲的搜索框更好实现，因为微信小程序公众平台提供了组件（很小声）。

组件链接

swiper组件

实现步骤

开始拷贝

结构实现

1. 从swiper组件文档的最底部的wxml中复制swiper组件的相关代码。
2. 从swiper组件文档的最底部的Javascript中复制data数据，放在index.js的data里面。
   把index.js原有data里面的数据都给删掉。
3. 把swiper-item里面的view改成image,目的是让每一个滑块展示出一张图片。
4. swiper-item是定义在block wx:for这个语法里面，wx:for是引用的js里面data的数据，data里面对应的数组值有几个，那么就会生成几个swiper-item。
   1. wx:for引用的值改为imgUrls,这样是为了见名知意。
   2. 把imgUrls数组写成需要的图片路径。
   3. 在image文件引入对应的图片路径。
5. 通过swiper相关属性来设置自动轮播、轮播间隔、轮播方向等。

index.js代码如下：

data: {
    imgUrls: ['/images/xsdkq_index_lbt1.png', '/images/xsdkq_index_lbt2.png', '/images/xsdkq_index_lbt3.png','/images/xsdkq_index_lbt4.png'],
    indicatorDots: true,
    vertical: false,
    autoplay: true,
    interval: 3500,
    duration: 500,
    activeColor:"#fff",
    circular:true
  },

index.wxml代码如下：

<!--轮播图的实现-->
<!--swiper组件是用来定义滑块视图容器，swiper-item是每一个滑块-->
<swiper indicator-dots="{{indicatorDots}}" indicator-active-color="{{activeColor}}"
    autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">
    <!--
        block是一个辅助线组件，他不会有任何展示效果；
        wx:for 用来定义for循环，wx:for="数组"；
        {{表达式}}wxml的插值表达式，从js的data里面引用值
            {{background}},从js的data中获取background对应的值
        在wxml页面中需要使用的数据，我们最好都定义在data中
    -->
    <block wx:for="{{imgUrls}}" wx:key="*this">
        <swiper-item>
            <!--swiper-item里面承载的是一张图片，不同的swiper-item承载着不同的图片-->
            <image src="{{item}}"></image>
        </swiper-item>
    </block>
</swiper>

样式实现

1. 标注图对于轮播图区域高度的定义是160pt，为了实际开发所展示的效果更好，高度定义为200pt,给swiper设置高度。
2. 给图片设置宽高。