微信小程序-广告滑动栏实现

之前在自学安卓的时候，我是从界面开始学起的，最近因为项目需要开始学习微信小程序，那么同样的也是由界面开始学起的==

总结了一下实现广告栏滑动的实例，微信小程序总的来说在控件方面的使用说明还是很明确的，使用起来也不算困难，有点html基础的同学基本都可以实现！

老规矩，先上图：

实现步骤如下：

俗话说工欲善其事必先利其器，开发工具下载微信官方有开发者工具，集成了开发调试、代码编辑及程序发布等功能。 下载地址（https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=20161107）

先上项目结构图，我这里涉及到了底部菜单栏，所以这里我们就只关注在打开的这个discovery文件夹这里，其中最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。

轮播图的具体实现：

（1）微信提供了一个swiper组件来实现轮播图。

代码也就出来了：

discovery.wxml

<swiper indicator-dots="{{indicatorDots}}"
    autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" class="slide-image" />
      </swiper-item>
    </block>
</swiper>

discovery.js

Page({
    data:{
        indicatorDots:true,
        autoplay:true,
        interval:5000,
        duration:1000,
        imgUrls:[
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489064081265&di=49eb16ce448b1923e86bb68cf8cc7378&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F11%2F30%2F21%2F40558PIC2VU.jpg',
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489064106458&di=b292fb25fc381e07bf1c003bd0072de5&imgtype=0&src=http%3A%2F%2Fimg3.redocn.com%2F20100816%2F20100813_67415c08730e70eff24eyawadQi5cu4L.jpg',
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489064106593&di=378b76e66ba1cd9c86c180c56f9b986c&imgtype=0&src=http%3A%2F%2Fpic9.nipic.com%2F20100916%2F811400_101559024698_2.jpg'
        ]
    },