微信小程序开发教程第五章：名片夹详情页开发

先看看「名片盒」详情页的效果图：

附注下大致市场需求：顶部背后就是轮播图，二维码按钮弹头出来模态侧边信息、页面微信栏、页面取走手机，地址栏须要地图展现，名片互动也就是模态侧边提示。

首先就是轮播图，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({

//模态侧边名字:”表明？暗藏”

})

方法就是使它表明。

须要用他的地方调用方法即可。(积极支持重复调用)

详情页公司边线地图轻易调用微信提供更多的USB同时实现（群里的 demo 存有同时实现方式）。

可以看看下同时实现的效果：