用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

michael:微信小程序之自定义模态弹窗(带动画)实例

天下雪 2017-3-17 00:12

作者:michael_ouyang,来自授权地址首先看看官方提供的模态弹窗api如下:示例:这样的模态弹窗,充其量只能做个alert,提示一下信息。但是并不能使用它来处理复杂性的弹窗业务,因此写了Michael从新自定义了一个, ...

作者:michael_ouyang,来自授权地址 
首先看看官方提供的模态弹窗 

api如下: 

 
示例: 

 
这样的模态弹窗,充其量只能做个alert,提示一下信息。 
但是并不能使用它来处理复杂性的弹窗业务,因此写了Michael从新自定义了一个,采用了仿原生的样式写法

wxml:

  1. <!--button-->
  2. <view class="btn" bindtap="powerDrawer" data-statu="open">button</view>
  3. <!--mask-->
  4. <view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view>
  5. <!--content-->
  6. <!--使用animation属性指定需要执行的动画-->
  7. <view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}">
  8. <!--drawer content-->
  9. <view class="drawer_title">弹窗标题</view>
  10. <view class="drawer_content">
  11. <view class="top grid">
  12. <label class="title col-0">标题</label>
  13. <input class="input_base input_h30 col-1" name="rName" value="可自行定义内容"></input>
  14. </view>
  15. <view class="top grid">
  16. <label class="title col-0">标题</label>
  17. <input class="input_base input_h30 col-1" name="mobile" value="110"></input>
  18. </view>
  19. <view class="top grid">
  20. <label class="title col-0">标题</label>
  21. <input class="input_base input_h30 col-1" name="phone" value="拒绝伸手党"></input>
  22. </view>
  23. <view class="top grid">
  24. <label class="title col-0">标题</label>
  25. <input class="input_base input_h30 col-1" name="Email" value="仅供学习使用"></input>
  26. </view>
  27. <view class="top bottom grid">
  28. <label class="title col-0">备注</label>
  29. <input class="input_base input_h30 col-1" name="bz"></input>
  30. </view>
  31. </view>
  32. <view class="btn_ok" bindtap="powerDrawer" data-statu="close">确定</view>
  33. </view>

wxss:

  1. /*button*/
  2. .btn {
  3. width: 80%;
  4. padding: 20rpx 0;
  5. border-radius: 10rpx;
  6. text-align: center;
  7. margin: 40rpx 10%;
  8. background: #000;
  9. color: #fff;
  10. }
  11. /*mask*/
  12. .drawer_screen {
  13. width: 100%;
  14. height: 100%;
  15. position: fixed;
  16. top: 0;
  17. left: 0;
  18. z-index: 1000;
  19. background: #000;
  20. opacity: 0.5;
  21. overflow: hidden;
  22. }
  23. /*content*/
  24. .drawer_box {
  25. width: 650rpx;
  26. overflow: hidden;
  27. position: fixed;
  28. top: 50%;
  29. left: 0;
  30. z-index: 1001;
  31. background: #FAFAFA;
  32. margin: -150px 50rpx 0 50rpx;
  33. border-radius: 3px;
  34. }
  35. .drawer_title{
  36. padding:15px;
  37. font: 20px "microsoft yahei";
  38. text-align: center; 邀请
    鲜花
    鲜花 (1)
    鸡蛋
    鸡蛋 (1)

    刚表态过的朋友 (2 人)

    分享至 : QQ空间
    收藏
    原作者: michael_ouyang 来自: 授权地址

    相关阅读

    推荐阅读

      最新Demo