• 标记生成出错,请与管理员联系! 2019-05-17
  • 这个问题,不是我们那些学者所讲的,国家崛起美国害怕了。而是美国舞着大棒,配合国内的资本共同讹诈。 2019-05-17
  • 香河县纪委监委严把信访举报交办督办回复“三关” 让信访举报件件有着落 2019-05-16
  • 向雷锋同志学习 厉害了!体彩志愿服务团队 2019-05-14
  • 美国20岁说唱歌手在迈阿密中枪疑似身亡 2019-05-14
  • 第37届香港电影金像奖颁奖典礼举行 2019-05-04
  • 这是一个错误的观点!这个错误的观点在自以为懂得马克思主义的人群中非常普遍!所以,这也就是中国为什么真正懂马克思主义的人不多的主要原因! 2019-05-02
  • 经济专家那么多,谁写出如何搞好公有制呢? 2019-05-02
  • 海军首次举行水雷战竞赛性考核 2019-05-02
  • 公共图书馆如何更有效地服务读者 2019-05-02
  • 男子模仿网红骑马上路 机动车道飞奔当街摔晕 2019-04-30
  • 小长假前两天,广州哪些文化场馆最火爆? 2019-04-30
  • 高清图集:习近平在山东考察 2019-04-28
  • 2000多家国企医院年底前完成剥离 2019-04-25
  • 天津旅游嘉年华下周开幕 多项活动展现文旅融合--旅游频道 2019-04-15
  • 用户
     找回密码
     立即注册

    QQ登录

    只需一步,快速开始

    扫一扫,登录网站

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

    河北11選5走势图:微信小程序之自定义模态弹窗(带动画)实例

    河北体彩11选5今天开奖 www.7vek.com Rolan 2019-4-11 00:48

    1、基本需求。实现用户自定义弹框带动画(动画可做参靠,个人要是觉得不好看可以自定义动画)获取弹出框的内容,自定义事件获取2、案例目录结构二、程序实现具体步骤1.弹框index.wxml代码!--button--view class="btn ...

    1、基本需求。

    • 实现用户自定义弹框 
    • 带动画(动画可做参靠,个人要是觉得不好看可以自定义动画) 
    • 获取弹出框的内容,自定义事件获取 


    2、案例目录结构

    二、程序实现具体步骤

    1.弹框index.wxml代码

    1. <!--button-->
    2. <view class="btn" bindtap="powerDrawer" data-statu="open">来点我呀</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>

    2.弹框index.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;
    39. }
    40. .drawer_content {
    41. height: 210px;
    42. overflow-y: scroll; /*超出父盒子高度可滚动*/
    43. }
    44. .btn_ok{
    45. padding: 10px;
    46. font: 20px "microsoft yahei";
    47. text-align: center;
    48. border-top: 1px solid #E8E8EA;
    49. color: #3CC51F;
    50. }
    51. .top{
    52. padding-top:8px;
    53. }
    54. .bottom {
    55. padding-bottom:8px;
    56. }
    57. .title {
    58. height: 30px;
    59. line-height: 30px;
    60. width: 160rpx;
    61. text-align: center;
    62. display: inline-block;
    63. font: 300 28rpx/30px "microsoft yahei";
    64. }
    65. .input_base {
    66. border: 2rpx solid #ccc;
    67. padding-left: 10rpx;
    68. margin-right: 50rpx;
    69. }
    70. .input_h30{
    71. height: 30px;
    72. line-height: 30px;
    73. }
    74. .input_h60{
    75. height: 60px;
    76. }
    77. .input_view{
    78. font: 12px "microsoft yahei";
    79. background: #fff;
    80. color:#000;
    81. line-height: 30px;
    82. }
    83. input {
    84. font: 12px "microsoft yahei";
    85. background: #fff;
    86. color:#000 ;
    87. }
    88. radio{
    89. margin-right: 20px;
    90. }
    91. .grid { display: -webkit-box; display: box; }
    92. .col-0 {-webkit-box-flex:0;box-flex:0;}
    93. .col-1 {-webkit-box-flex:1;box-flex:1;}
    94. .fl { float: left;}
    95. .fr { float: right;}

    3.弹框index.js逻辑代码 
    a.动画部分的功能实现

    1. util: function(currentStatu){
    2. /* 动画部分 */
    3. // 第1步:创建动画实例
    4. var animation = wx.createAnimation({
    5. duration: 200, //动画时长
    6. timingFunction: "linear", //线性
    7. delay: 0 //0则不延迟
    8. });
    9. // 第2步:这个动画实例赋给当前的动画实例
    10. this.animation = animation;
    11. // 第3步:执行第一组动画
    12. animation.opacity(0).rotateX(-100).step();
    13. // 第4步:导出动画对象赋给数据对象储存
    14. this.setData({
    15. animationData: animation.export()
    16. })
    17. // 第5步:设置定时器到指定时候后,执行第二组动画
    18. setTimeout(function () {
    19. // 执行第二组动画
    20. animation.opacity(1).rotateX(0).step();
    21. // 给数据对象储存的第一组动画,更替为执行完第二组动画的动画对象
    22. this.setData({
    23. animationData: animation
    24. })
    25. //关闭
    26. if (currentStatu == "close") {
    27. this.setData(
    28. {
    29. showModalStatus: false
    30. }
    31. );
    32. }
    33. }.bind(this), 200)
    34. // 显示
    35. if (currentStatu == "open") {
    36. this.setData(
    37. {
    38. showModalStatus: true
    39. }
    40. );
    41. }
    42. }

    三、案例运行效果图

    分享至 : QQ空间
    收藏
    原作者: 搬砖小伙子 来自: cnblogs
  • 标记生成出错,请与管理员联系! 2019-05-17
  • 这个问题,不是我们那些学者所讲的,国家崛起美国害怕了。而是美国舞着大棒,配合国内的资本共同讹诈。 2019-05-17
  • 香河县纪委监委严把信访举报交办督办回复“三关” 让信访举报件件有着落 2019-05-16
  • 向雷锋同志学习 厉害了!体彩志愿服务团队 2019-05-14
  • 美国20岁说唱歌手在迈阿密中枪疑似身亡 2019-05-14
  • 第37届香港电影金像奖颁奖典礼举行 2019-05-04
  • 这是一个错误的观点!这个错误的观点在自以为懂得马克思主义的人群中非常普遍!所以,这也就是中国为什么真正懂马克思主义的人不多的主要原因! 2019-05-02
  • 经济专家那么多,谁写出如何搞好公有制呢? 2019-05-02
  • 海军首次举行水雷战竞赛性考核 2019-05-02
  • 公共图书馆如何更有效地服务读者 2019-05-02
  • 男子模仿网红骑马上路 机动车道飞奔当街摔晕 2019-04-30
  • 小长假前两天,广州哪些文化场馆最火爆? 2019-04-30
  • 高清图集:习近平在山东考察 2019-04-28
  • 2000多家国企医院年底前完成剥离 2019-04-25
  • 天津旅游嘉年华下周开幕 多项活动展现文旅融合--旅游频道 2019-04-15
  • 秒速飞艇可以作假吗 极速飞艇在线计划 快乐12开奖走势图 北京赛车pk10好不好赚 3d开机号试机号列表机号列表 决战21点 18077期足彩胜负彩 彩票平台评价 重庆时时彩开奖视频 直立刮刮乐拖把 排列五开奖号码走势图 足彩任选9场历史开奖 上海时时乐 篮彩胜分差是什么意思 北京赛车pk10玩法教学 天津新时时彩走势图