首頁 > 微信小程式 > 小程式開發 > 微信小程式開發(五)名片盒「我」的頁面詳解

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

零下一度
發布: 2017-05-23 13:29:15
原創
3382 人瀏覽過

用戶有多張名片,需要左右切換查看,往下切換是選單按鈕。 這裡需求兩處滑動,用到了微信提供給我們的滑動組件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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板