微信小程式開發（五）名片盒「我」的頁面詳解

用戶有多張名片，需要左右切換查看，往下切換是選單按鈕。 這裡需求兩處滑動，用到了微信提供給我們的滑動組件swiper，並且進行了嵌套使用，第一層是名片展示與菜單按鈕的上下滑動， 第二層是名片展示的左右滑動（支持互相嵌套使用的，可以放心使用）。

Vertical 加上是縱向滑動，去掉即是左右滑動。整體架構如下所示：

點擊事件綁定的是資料切換方式，因為需要支援多次點擊切換。

初始化資料是nextSlide：

##再看下nextSlide 事件。 currentSlide 是目前頁面的 index，改變它即可完成切換效果，可以看上圖初始化資料時設定了 cs 是 0。

因而賦值目前 data.cs+1 即可，再把綁定點擊事件 clickNext 切換成 nextSlideAgain。

再看下 nextSlideAgain 事件，執行的減去 1 個索引，實現多次點擊切換效果。

具體效果可以看到。 點選個人名片進去編輯名片頁面，由於需要帶參，故而使用的是 wx.navgateTo。

可以看下效果：

最後上點乾貨：

我們發出第一篇教學的時候有人就注意到這點了，怎麼做真實數據交互，下面大家可以了解下。
首先進去是
MD5 加密，requster 互動層。

怎麼引用 MD5.js？當然是模組化 require，被引用的 js 不要忘記 module.exports 出來。

下面是 requester.js 引用 MD5.js。
ApplicationRoot 是伺服器位址（設定伺服器時在開發設定頁面查看 AppID 和 AppSecret，設定伺服器網域名稱）。

Require.js 這裡 module.exports 是暴露方法出去。 。

這時候在全域 app.js 裡面引入 require.js 對應到全域 global，這個 global 是全域的。

這時候那個頁面需要那個頁面就直接去接受吧，模組化是不是很好用？

可以完整的看下與後台做資料互動的一個請求實作方式如下：

圖一是requester.js 裡面的封裝。
圖二是需要呼叫資料的頁面渲染。

#大家有什麼疑問可以多指點，會在下一章說明一些已知疑問。

應該有一些人喜歡 sublime 編輯器，有人問怎麼切換高亮，在你的右下角直接切換成 html 即可。

【相關推薦】

1. 微信小程式完整原始碼下載

2. 微信小程式demo:卡卡車

3. #簡單的左滑操作和瀑布流佈局

#

以上是微信小程式開發（五）名片盒「我」的頁面詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！