微信小程序開發(fā)中如何實現(xiàn)名片夾詳情頁-創(chuàng)新互聯(lián)

小編給大家分享一下微信小程序開發(fā)中如何實現(xiàn)名片夾詳情頁，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)主營橫縣網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,app開發(fā)定制,橫縣h5成都微信小程序搭建,橫縣網(wǎng)站營銷推廣歡迎橫縣等地區(qū)企業(yè)咨詢

先看下「名片盒」詳情頁的效果圖：

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

//輪播圖發(fā)生改變時改變數(shù)字

//初始化數(shù)據(jù)

Data:{

currentNumber:1

}

slidechange:function(e){

var number = e.detail.current;

this.setData({

currentNumber:number+1

})

},

這里可以看到全屏狀態(tài)下當關(guān)閉按鈕被點擊后 getBackStyle，把 changeClick 切換到 imgFullScrenn 待命。

再次點擊返回原樣式，

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

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

詳情頁可以看到信息基本都是樣式一樣，可以使用微信提供的循環(huán) block。下面是詳情頁里面的個人信息數(shù)據(jù)， 如果有信息就顯示出來，沒有數(shù)據(jù)的不顯示，這里使用

//中文信息

           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 數(shù)據(jù)格式來處理，我們需要做的就是給它綁定 display 的值，然后我們調(diào)用即可。

微信此版本的 setData 不支持異步更新數(shù)據(jù)，故而我們在發(fā)生真實網(wǎng)絡(luò)數(shù)據(jù)請求時一定要在后面加上 forceUpdata()，強制觸發(fā)視圖渲染，否則會出現(xiàn)很多莫名其妙的 bug。

這里說明下：如是服務(wù)器真實數(shù)據(jù)。

可以看到會報錯，可能是 js 的執(zhí)行順序，依次往下走，此時網(wǎng)絡(luò)數(shù)據(jù)還在請求中。

定義一個變量即可。

當然這里的數(shù)據(jù)都是 push 上來的。

以下是二維碼彈出信息。

這是彈出模態(tài)框二維碼信息，布好局初始化是none狀態(tài)。那里需要它直接綁定數(shù)據(jù)即可：

This.setData({
//模態(tài)框名字:”顯示？隱藏”
})

方法是讓它顯示。

需要用他的地方調(diào)用方法即可。(支持重復(fù)調(diào)用)
詳情頁公司位置地圖直接調(diào)用微信提供的接口實現(xiàn)（群里的 demo 有實現(xiàn)方式）。
可以看下實現(xiàn)的效果：

以上是“微信小程序開發(fā)中如何實現(xiàn)名片夾詳情頁”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當前題目：微信小程序開發(fā)中如何實現(xiàn)名片夾詳情頁-創(chuàng)新互聯(lián)
鏈接URL：http://muchs.cn/article44/pheee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、電子商務(wù)、營銷型網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計、微信小程序、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)