之前在自学安卓的时候，我是从界面开始学起的，最近因为项目需要开始学习微信小程序，那么同样的也是由界面开始学起的==
总结了一下实现广告栏滑动的实例，微信小程序总的来说在控件方面的使用说明还是很明确的，使用起来也不算困难，有点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://pic.58pic.com/58pic/11/30/21/40558PIC2VU.jpg', 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489064106458&di=b292fb25fc381e07bf1c003bd0072de5&imgtype=0&src=http://img3.redocn.com/20100816/20100813_67415c08730e70eff24eyawadQi5cu4L.jpg', 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489064106593&di=378b76e66ba1cd9c86c180c56f9b986c&imgtype=0&src=http://pic9.nipic.com/20100916/811400_101559024698_2.jpg' ] },
