之前在自学安卓的时候,我是从界面开始学起的,最近因为项目需要开始学习微信小程序,那么同样的也是由界面开始学起的==
总结了一下实现广告栏滑动的实例,微信小程序总的来说在控件方面的使用说明还是很明确的,使用起来也不算困难,有点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'
]
},