Image text

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

HTML結(jié)構(gòu)

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

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

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

Image text

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

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