2.gif
最近开会，由于老总有提及过可能会开发小程序。故本人在会后自主学习研究如何做小程序。
首先先谢谢微信小程序开发团队提供的详细文档，以及网上各个撸友提供的js、html、css相关的知识供本人参考学习。
在做小程序之前，我是撸OC的。 虽然有学过H5基础。但是也只是停留在认识，造写easy demo的程度。但是通过这次的项目实战，我对H5相关语法有了更深的理解和认知。
好了，下面 show my code——>
wxml部分代码
<!--尺码按钮 -->
<text class='size' bindtap='showSizeList'>{{size_name}}</text>
<!--遮罩 -->
<view class='mask-view' wx:if='{{showModalStatus}}' bindtap='hiddenSizeList' animation="{{animation_mask}}"></view>
<!-- 尺码列表 -->
<view class='size-list' animation="{{animation}}">
<!-- 默认的尺码数据 -->
<block wx:for="{{colors[0].size}}" wx:key="colors">
<!-- item -->
<view class='size-item' bindtap='selectedSize' data-index='{{index}}' data-size='{{item.size}}'>{{item.size}}</view>
<view class='bottom-line' style='height: 1px; width: 100%; margin-top:0px;background-color: #f1f1f1;'></view>
</block>
</view>
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) {
// 展示尺码列表
this.modalSizeList()
},
// 隐藏尺码列表
hiddenSizeList: function(e) {
var that = this;
this.animation_list.height(0).step()
this.animation_mask.opacity(0).step()
that.setData({
animation: this.animation_list.export(),
animation_mask: this.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]
this.setData({
size_name: size
})
this.hiddenSizeList()
},
// 展示尺码列表
modalSizeList: function () {
var that = this;
this.animation_list = wx.createAnimation({
duration: 500,
timingFunction: 'ease',
})
this.animation_mask = wx.createAnimation({
duration: 200,
timingFunction: 'linear',
})
if (!this.data.showModalStatus) { // 未渲染 展示尺码列表
// 渲染遮罩
this.setData({
showModalStatus: true
})
// 当前选中款色所拥有的所有尺码
var height = 41 * this.data.colors[0].size.length
this.animation_list.height(height).step()
this.animation_mask.opacity(0.2).step()
that.setData({
animation: that.animation_list.export(),
animation_mask: that.animation_mask.export()
})
} else { // 已渲染 隐藏尺码列表
this.animation_list.height('0rpx').step()
this.animation_mask.opacity(0).step()
that.setData({
animation: that.animation_list.export(),
animation_mask: that.animation_mask.export()
})
// 延迟500ms 执行
setTimeout(function () {
// 渲染遮罩
this.setData({
showModalStatus: false
})
}, 500)
}
},
})
通过这半个月来一边学习一边实战的过程，个人感觉。跨语言去实现一些实际的需求，虽然有难度。但是并没有想象的那么难。毕竟现在是信息化时代，不懂的网上都有。足够你完成项目需求了。但是如果想要掌握其精髓，那还是需要下一番功夫的。
OK，代码和个人感悟都BB了一通。最后如果有问题或者建议，希望各位看客留言讨论！~
