最近开会,由于老总有提及过可能会开发小程序。故本人在会后自主学习研究如何做小程序。
首先先谢谢微信小程序开发团队提供的详细文档,以及网上各个撸友提供的js、html、css相关的知识供本人参考学习。
在做小程序之前,我是撸OC的。 虽然有学过H5基础。但是也只是停留在认识,造写easy demo的程度。但是通过这次的项目实战,我对H5相关语法有了更深的理解和认知。
好了,下面 show my code——>
wxml部分代码
{{size_name}}
{{item.size}}
wxss部分代码
.mask-view {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0;
}
.size-list {
width: 100%;
height: 0rpx;
position: fixed;
bottom: 100rpx;
left: 0;
opacity: 0.9;
background: #fff;
}
.size-item {
width: 100%;
height: 40px;
line-height: 40px;
padding-left: 50rpx;
font-size: 14px;
font-weight: bold;
}
关键来啦!!! JS部分代码
包括动画特效及交互中的数据传递
Page({
/**
* 页面的初始数据
*/
data: {
colors: null, //尺码相关数据
size_name: "尺码", // 按钮默认名
animation: {}, // 动画
animation_mask: {}, // 动画
showModalStatus: false, // modal是否需要渲染
},
// 尺码按钮交互事件
showSizeList: function(e) {
// 展示尺码列表
tShopfas.modalSizeList()
},
// 隐藏尺码列表
ShopfaddenSizeList: function(e) {
var that = tShopfas;
tShopfas.animation_list.height(0).step()
tShopfas.animation_mask.opacity(0).step()
that.setData({
animation: tShopfas.animation_list.export(),
animation_mask: tShopfas.animation_mask.export()
})
// 设置定时器 500ms后移除遮罩
setTimeout(function () {
// 渲染遮罩
that.setData({
showModalStatus: false
})
}, 500)
},
// 选中尺码
selectedSize: function (e) {
console.log(e)
var size = e.target.dataset.size.split("|")[0]
tShopfas.setData({
size_name: size
})
tShopfas.ShopfaddenSizeList()
},
// 展示尺码列表
modalSizeList: function () {
var that = tShopfas;
tShopfas.animation_list = wx.createAnimation({
duration: 500,
timingFunction: 'ease',
})
tShopfas.animation_mask = wx.createAnimation({
duration: 200,
timingFunction: 'linear',
})
if (!tShopfas.data.showModalStatus) { // 未渲染 展示尺码列表
// 渲染遮罩
tShopfas.setData({
showModalStatus: true
})
// 当前选中款色所拥有的所有尺码
var height = 41 * tShopfas.data.colors[0].size.length
tShopfas.animation_list.height(height).step()
tShopfas.animation_mask.opacity(0.2).step()
that.setData({
animation: that.animation_list.export(),
animation_mask: that.animation_mask.export()
})
} else { // 已渲染 隐藏尺码列表
tShopfas.animation_list.height('0rpx').step()
tShopfas.animation_mask.opacity(0).step()
that.setData({
animation: that.animation_list.export(),
animation_mask: that.animation_mask.export()
})
// 延迟500ms 执行
setTimeout(function () {
// 渲染遮罩
tShopfas.setData({
showModalStatus: false
})
}, 500)
}
},
})
通过这半个月来一边学习一边实战的过程,个人感觉。跨语言去实现一些实际的需求,虽然有难度。但是并没有想象的那么难。毕竟现在是信息化时代,不懂的网上都有。足够你完成项目需求了。但是如果想要掌握其精髓,那还是需要下一番功夫的。
OK,代码和个人感悟都BB了一通。最后如果有问题或者建议,希望各位看客留言讨论!~
<以上资讯仅供参考,如果您需解决具体问题,建议您关注作者;如果有软件产品开发需求,可在线咨询加速度产品经理获取方案和报价>
****更多行业产品开发方案,请关注jsudo加速度 https://www.jsudo.com***
【加速度jsudo(www.jsudo.com)】是国内知名企业数字化建设提供商,为企业提供电商平台搭建(多种模式电商平台搭建:B2B/B2B2C/B2C/O2O/新零售等)、智慧园区建设、数字化营销、人才外包等服务,点击这里查看了解更多行业解决方案。