效果圖與需求：

 

 

 

 

用戶有多張名片，需要左右切換查看，往下切換是菜單按鈕。

 

 

這里需求兩處滑動，用到了微信提供給我們的滑動組件 swiper，并且進行了嵌套使用，第一層是名片展示與菜單按鈕的上下滑動，第二層是名片展示的左右滑動（支持互相嵌套使用的，可以放心使用）。

 

 

Vertical 加上就是縱向滑動，去掉即是左右滑動。

 

 

整體結(jié)構(gòu)如下所示：

 

 

 

 

點擊事件綁定的是數(shù)據(jù)切換方式，因為需要支持多次點擊切換。

 

 

 

 

初始化數(shù)據(jù)是 nextSlide：

 

 

 

 

再看下 nextSlide 事件。currentSlide 是當(dāng)前頁面的 index，改變它即可完成切換效果，可以看上圖初始化數(shù)據(jù)時設(shè)置了 cs 是 0。

 

 

 

 

因而賦值當(dāng)前 data.cs+1 即可，再把綁定點擊事件 clickNext 切換成 nextSlideAgain。

 

 

 

 

再看下 nextSlideAgain 事件，執(zhí)行的減去 1 個索引，實現(xiàn)多次點擊切換效果。

 

 

 

 

具體效果可以看到。

 

 

點擊個人名片進去編輯名片頁面，由于需要帶參，故而使用的是 wx.navgateTo。

 

 

 

 

可以看下效果：

 

 

 

 

 

 

最后上點干貨：

 

 

我們發(fā)出第一篇教程的時候有人就注意到這點了，怎么做真實數(shù)據(jù)交互，下面大家可以了解下。

 

 

首先進去是 MD5 加密，requster 交互層。

 

 

 

 

怎么引用 MD5.js？當(dāng)然是模塊化 require，被引用的 js 不要忘記 module.exports 出來。

 

 

下面是 requester.js 引用 MD5.js。

 

 

ApplicationRoot 是服務(wù)器地址（配置服務(wù)器時在開發(fā)設(shè)置頁面查看 AppID 和 AppSecret，配置服務(wù)器域名）。

 

 

 

 

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

 

 

 

 

這時候在全局 app.js 里面引入 require.js 映射到全局 global，這個 global 是全局的。

 

 

 

 

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

 

 

 

 

可以完整的看下與后臺做數(shù)據(jù)交互的一個請求實現(xiàn)方式如下：

 

 

圖一是 requester.js 里面的封裝。

 

 

圖二是需要調(diào)用數(shù)據(jù)的頁面渲染。