微信小程序开发——自定义模式弹出窗口

2.gif

在最近的一次会议上，老板提到他可能会开发小程序。因此，我在会后研究了如何独立做小程序。

首先，我要感谢微信小程序开发团队提供了详细的文档，以及在线用户提供的与js、html和css相关的知识，供我参考。

在做小程序之前，我是一名OC用户。虽然我已经学习了H5基础知识。然而，他们只停留在理解和编写简单演示的水平。但通过这个项目，我对H5相关语法有了更深的理解和认知。

好，现在显示我的代码-->

Wxml部件代码

｛｛size_name｝｝

<；/视图>

{｛itet.size｝｝

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型