Image text

這個界面用到了微信小程序自帶的輪播圖(swiper)組件以及底欄(tabbar)組件，能夠快速的實現(xiàn)我們想要的圖片輪播和底欄切換的效果，而這些用原生js或者jquery來coding都是很麻煩的. 讓我們來看看微信小程序是如何實現(xiàn)的吧：

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. })

以上就是實現(xiàn)圖片輪播效果的代碼，使用滑塊視圖容器swiper組件,它擁有vertical(是否垂直放置圖片）、autoplay(是否自動切換）、interval(自動切換時間間隔)、duration(滑動動畫時長)、durationindicator-dot(是否顯示面板指示點)等屬性，再在js里對這些屬性做相關的設置。此外，在組件上還用到了列表渲染wx:for，將圖片的src屬性綁定在一個數(shù)組上，使用數(shù)組中各項的數(shù)據(jù)重復渲染swiper組件

看看底欄切換交互的效果吧！

Image text

先暫且不管我制作的gif圖有多渣，主要想體現(xiàn)的就是個各底部欄之間能進行切換，這個功能實現(xiàn)較簡單，主要在tabBar里設置樣式、頁面路徑、圖片路徑，用列表list來渲染,詳細請參考以下代碼

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