应用程序开发公司
软件开发

针对您的项目需求及预算规划量身制定方案

个体/中小企业/集团/政府机构/行业组织 了解详情 了解详情

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

发布时间:2024-01-01 00:00 浏览次数:30

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


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


首先就是轮播图,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 存有同时实现方式)。


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

TAG标签:
阅读推荐