微信小程序开发——自定义模式弹出窗口
微信小程序开发
小程序开发
浏览：769 次
2.gif
在最近的一次会议上，老板提到他可能会开发小程序。因此，我在会后研究了如何独立做小程序。
首先，我要感谢微信小程序开发团队提供了详细的文档，以及在线用户提供的与js、html和css相关的知识，供我参考。
在做小程序之前，我是一名OC用户。虽然我已经学习了H5基础知识。然而，他们只停留在理解和编写简单演示的水平。但通过这个项目，我对H5相关语法有了更深的理解和认知。
好，现在显示我的代码-->
Wxml部件代码
Wxss零件代码
.遮罩视图{
宽度：100%；
高度：100%；
位置：固定；
顶部：0；
左：0；
背景：#000；
不透明度：0；
}
.尺寸列表{
宽度：100%；
高度：0rpx；
位置：固定；
底部：100rpx；
左：0；
不透明度：0.9；
背景：#fff；
}
.size项目{
宽度：100%；
高度：40px；
行高：40px；
左填充：50rpx；
字体大小：14px；
font-weight:粗体；
}
钥匙来了！！！JS代码的一部分包括动画特效和交互中的数据传输
第页({
/**
*页面的初始数据
*/
数据：{
颜色：null，//大小相关数据
size_名称：“size”，//按钮默认名称
动画：｛｝，//动画
animation_掩码：｛｝，//动画
showModalStatus:false，//是否需要呈现模式
},
//大小按钮交互事件
showSizeList:函数（e）{
//显示尺寸列表
this.modalSizeList（）
},
//隐藏尺寸列表
hiddenSizeList:函数（e）{
var=这个；
这animation_list.height（0）.step（）
这animation_mask.opacity（0）.step（）
that.setData（设置数据）({
动画：这个。animation_list.export（），
animation_mask：这个。animation_mask.export（）
})
//定时器设置500ms后，取下面罩
setTimeout（函数（）{
//渲染遮罩
that.setData（设置数据）({
showModalStatus:错误
})
}, 500)
},
//选定的大小
selectedSize:函数（e）{
控制台.log（e）
var size=e.target.dataset.size.split（“|”）[0]
this.set数据({
size_名称：大小
})
this.hiddenSizeList（）
},
//显示尺寸列表
modalSizeList:函数（）{
var=这个；
这animation_list=wx.createAnimation({
持续时间：500，
timingFunction:'轻松'，
})
这animation_ mask=wx.createAnimation（动画）({
持续时间：200，
timingFunction:'线性'，
})
如果（！This.data.showModalStatus）｛//未呈现显示大小列表
//渲染遮罩
this.set数据({
showModalStatus:真
})
//当前选定颜色的所有大小
var height=41*this.data.colors[0].size.length
这animation_list.height（高度）.step（）
这animation_mask.opacity（0.2）.step（）
that.setData（设置数据）({
动画：那个。animation_list.export（），
animation_mask：这个。animation_mask.export（）
})
}else｛//呈现隐藏大小列表
t型
