微信小程序仿阿姨幫

發布時間：2018-04-18 11:42 所屬欄目：小程序開發教程

我做的小程序是模仿手機app版的阿姨幫軟件，主要實現的功能有：

地理定位
地圖選址
預約服務
下單
查看訂單
頁面跳轉
底欄切換良好交互
圖片輪播

首先先要解釋我的數據來源，我使用的是用mock來模擬數據，詳情看http://www.easy-mock.com Easy Mock是一個可視化工具，能快速生成模擬數據的服務，它能為我們提供一個數據接口url，這要我們就能夠使用request發送數據請求了。其次要解釋的是用戶登錄問題，我選擇的使用微信賬號登錄，使用小程序自帶的wx.getUseInfo()應用接口來獲取用戶的信息，當然它首先會調用wx.login接口，詢問用戶是否給予權限。先就交代這兩點，讓我們正式進入主題：

功能實現

輪播圖 & 底欄交互 & 頁面跳轉
先來看看主界面：

Image text

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

HTML結構

<swiper
class="binner"
vertical="{{vertical}}"
autoplay="{{autoplay}}"
interval="{{interval}}"
duration="{{duration}}"
indicator-dots="{{indicatorDots}}">
<block wx:for="{{topimg}}" wx:key="item">
<swiper-item>
<image src="{{item.image}}" class="slide-image"></image>
</swiper-item>
</block>
<view class="city" bindtap="bindViewTap" >
<text class="current">{{city}}</text>
</view>
</swiper>
JS配置
Page({
data: {
indicatorDots:true,
vertical:false,
autoplay:true,
interval:3000,
duration:1200,
......
}
})

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

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