微信小程序开发之——自定义modal弹窗

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了一通。最后如果有问题或者建议，希望各位看客留言讨论！~