Image text

这个界面用到了微信小程序自带的轮播图(swiper)组件以及底栏(tabbar)组件，能够快速的实现我们想要的图片轮播和底栏切换的效果，而这些用原生js或者jquery来coding都是很麻烦的. 让我们来看看微信小程序是如何实现的吧：

HTML结构

1. <swiper
2. class="binner"
3. vertical="{{vertical}}"
4. autoplay="{{autoplay}}"
5. interval="{{interval}}"
6. duration="{{duration}}"
7. indicator-dots="{{indicatorDots}}">
8. <block wx:for="{{topimg}}" wx:key="item">
9. <swiper-item>
10. <image src="{{item.image}}" class="slide-image"></image>
11. </swiper-item>
12. </block>
13. <view class="city" bindtap="bindViewTap" >
14. <text class="current">{{city}}</text>
15. </view>
16. </swiper>
17. JS配置
18.  
19. Page({
20. data: {
21. indicatorDots:true,
22. vertical:false,
23. autoplay:true,
24. interval:3000,
25. duration:1200,
26. ......
27. }
28. })

以上就是实现图片轮播效果的代码，使用滑块视图容器swiper组件,它拥有vertical(是否垂直放置图片）、autoplay(是否自动切换）、interval(自动切换时间间隔)、duration(滑动动画时长)、durationindicator-dot(是否显示面板指示点)等属性，再在js里对这些属性做相关的设置。此外，在组件上还用到了列表渲染wx:for，将图片的src属性绑定在一个数组上，使用数组中各项的数据重复渲染swiper组件

看看底栏切换交互的效果吧！

Image text

先暂且不管我制作的gif图有多渣，主要想体现的就是个各底部栏之间能进行切换，这个功能实现较简单，主要在tabBar里设置样式、页面路径、图片路径，用列表list来渲染,详细请参考以下代码

1. "tabBar":{
2. "color":"#888",
3. "selectedColor":"#00beaf",
4. "borderStyle":"white",
5. "backgroundColor":"#fff",
6. "list":[{
<li o="" cl="" ptm="" pbm"="">