无码日韩精品无码国产_一级做a爰片久久毛片潮喷_国产欧美国日产_久久9热re这里只有国产中文精品6_每天将为您更新成人影视在线看免费观看

Menu
小程序資訊
小程序資訊
微信小程序開發(fā)教程第五章:名片夾詳情頁開發(fā)
時(shí)間:2016-10-12 22:39:00

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

微信小程序開發(fā)教程第五章:名片夾詳情頁開發(fā)

微信小程序開發(fā)教程第五章:名片夾詳情頁開發(fā)

備注下大致需求:頂部背后是輪播圖,二維碼按鈕彈出模態(tài)框信息、點(diǎn)擊微信欄、點(diǎn)擊存入手機(jī),地址欄需要地圖展示,名片分享也是模態(tài)框指引。

首先是輪播圖,autoplay 自動(dòng)播放,interval 輪播的時(shí)間,duration 切換速度,可以根據(jù)自己需求去添加。

Delete:是刪除按鈕,加載進(jìn)來是隱藏的,需用戶點(diǎn)輪播圖進(jìn)去后,輪播圖全屏顯示才出來。
noClickImg 與 ClickImg:切換全屏與非全屏輪播圖,綁定了點(diǎn)擊事件 changeClick 來切換,只是改變樣式即可。
Block:圖片列表。
Number_img:當(dāng)前輪播 index(currentNumber),與圖片 length 集合(cardnum)。
其中 currentNumber:

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

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

Data:{

currentNumber:1

}

slidechange:function(e){

var number = e.detail.current;

this.setData({

currentNumber:number+1

})

},

微信小程序開發(fā)教程第五章:名片夾詳情頁開發(fā)

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

微信小程序開發(fā)教程第五章:名片夾詳情頁開發(fā)

再次點(diǎn)擊返回原樣式,

微信小程序開發(fā)教程第五章:名片夾詳情頁開發(fā)

切換后事件又走回到 getBackStyle 了,靈活運(yùn)用。

微信小程序開發(fā)教程第五章:名片夾詳情頁開發(fā)

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

微信小程序開發(fā)教程第五章:名片夾詳情頁開發(fā)

詳情頁可以看到信息基本都是樣式一樣,可以使用微信提供的循環(huán) block。

下面是詳情頁里面的個(gè)人信息數(shù)據(jù),

如果有信息就顯示出來,沒有數(shù)據(jù)的不顯示,這里使用

微信小程序開發(fā)教程第五章:名片夾詳情頁開發(fā)

//中文信息

               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)用即可。

微信小程序開發(fā)教程第五章:名片夾詳情頁開發(fā)

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

微信小程序開發(fā)教程第五章:名片夾詳情頁開發(fā)

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

微信小程序開發(fā)教程第五章:名片夾詳情頁開發(fā)

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

微信小程序開發(fā)教程第五章:名片夾詳情頁開發(fā)

定義一個(gè)變量即可。

微信小程序開發(fā)教程第五章:名片夾詳情頁開發(fā)

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

微信小程序開發(fā)教程第五章:名片夾詳情頁開發(fā)

以下是二維碼彈出信息。

微信小程序開發(fā)教程第五章:名片夾詳情頁開發(fā)

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

This.setData({

//模態(tài)框名字:”顯示?隱藏”

})

方法是讓它顯示。

微信小程序開發(fā)教程第五章:名片夾詳情頁開發(fā)

需要用他的地方調(diào)用方法即可。(支持重復(fù)調(diào)用)

詳情頁公司位置地圖直接調(diào)用微信提供的接口實(shí)現(xiàn)(群里的 demo 有實(shí)現(xiàn)方式)。

可以看下實(shí)現(xiàn)的效果:

微信小程序開發(fā)教程第五章:名片夾詳情頁開發(fā)

微信小程序開發(fā)教程第五章:名片夾詳情頁開發(fā)

咨詢
微信掃碼咨詢
電話咨詢
400-888-9358