微信小程式開發（三）名片夾詳情頁實例教程

今天加了新乾貨！除了開發日誌本身，也回答了一些朋友的問題。閒話不多說，先看下「名片盒」詳情頁的效果圖：

備註下大致需求：頂部背後是輪播圖，二維碼按鈕彈出模態框資訊、點擊微信欄、點擊存入手機，網址列需要地圖展示，名片分享也是模態框指引。
首先是輪播圖，autoplay 自動播放，interval 輪播的時間，duration 切換速度，可以依照自己需求去添加。
Delete：是刪除按鈕，載入進來是隱藏的，需用戶點輪播圖進去後，輪播圖全螢幕顯示才出來。
noClickImg 與 ClickImg：切換全螢幕與非全螢幕輪播圖，綁定了點擊事件 changeClick 來切換，只是改變樣式即可。
Block：圖片列表。
Number_img：目前輪播 index（currentNumber），與圖片 length 集合（cardnum）。
其中currentNumber：

//輪播圖改變時改變數字

//初始化資料

#Data:{

currentNumber:1

}

slidechange:function(e){

var number = e.detail.current;

this.setData({

#currentNumber:number+1

})

},

#這裡可以看到全螢幕狀態下當關閉按鈕被點擊後getBackStyle，把changeClick 切換到imgFullScrenn 待命。

再次點擊返回原始樣式，

切換後事件又走回getBackStyle 了，靈活運用。

刷新下開發者工具可以看到具體效果如下：

詳情頁可以看到資訊基本上都是樣式一樣，可以使用微信提供的循環block。下面是詳情頁裡面的個人資訊數據， 如果有資訊就顯示出來，沒有數據的不顯示，這裡使用

//中文信息

           var chinaMessage = res.card.groups[0].fields;

var personMessage= []

           for(var i = 0;i

            personMessage.push(chinaMessage[i])

           }

           //为空或者null是不显示判断

          for(var k in personMessage){

            if(personMessage[k].value==null || personMessage[k].value==""){

            personMessage[k]["display"] = "none";

            }else{

            personMessage[k]["display"] = "block";

            }

           }

具體以json 資料格式來處理，我們需要做的就是給它綁定display 的值，然後我們呼叫即可。

微信此版本的setData 不支援非同步更新數據，故而我們在發生真實網路數據請求時一定要在後面加上forceUpdata()，強制觸發視圖渲染，否則會出現很多莫名其妙的bug。

這裡說明下：如是伺服器真實資料。

可以看到會報錯，可能是js 的執行順序，依序往下走，此時網路數據還在請求中。

定義變數即可。

當然這裡的資料都是 push 上來的。

以下是二維碼彈出訊息。

這是彈出模態框二維碼訊息，布好局初始化是none狀態。那裡需要它直接綁定資料即可：

This.setData({
//模态框名字:”显示？隐藏”
})

方法是讓它顯示。

需要用他的地方呼叫方法即可。 (支援重複呼叫)
詳情頁公司位置地圖直接呼叫微信提供的介面實作（群組裡的 demo 有實作方式）。
可以看下實現的效果：

【相關推薦】

1.

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

#2. 

微信小程式demo:卡卡汽車

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

以上是微信小程式開發（三）名片夾詳情頁實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！