评论

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

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

1、基本需求。

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

2、案例目录结构

二、程序实现具体步骤
1.弹框index.wxml代码

<!–button–>
<view class=“btn” bindtap=“powerDrawer” data-statu=“open”>来点我呀</view>
<!–mask–>
<view class=“drawer_screen” bindtap=“powerDrawer” data-statu=“close” wx:if="{{showModalStatus}}"></view>
<!–content–>
<!–使用animation属性指定需要执行的动画–>
<view animation="{{animationData}}" class=“drawer_box” wx:if="{{showModalStatus}}">
<!–drawer content–>
<view class=“drawer_title”>弹窗标题</view>
<view class=“drawer_content”>
<view class=“top grid”>
<label class=“title col-0”>标题</label>
<input class=“input_base input_h30 col-1” name=“rName” value=“可自行定义内容”></input>
</view>
<view class=“top grid”>
<label class=“title col-0”>标题</label>
<input class=“input_base input_h30 col-1” name=“mobile” value=“110”></input>
</view>
<view class=“top grid”>
<label class=“title col-0”>标题</label>
<input class=“input_base input_h30 col-1” name=“phone” value=“拒绝伸手党”></input>
</view>
<view class=“top grid”>
<label class=“title col-0”>标题</label>
<input class=“input_base input_h30 col-1” name=“Email” value=“仅供学习使用”></input>
</view>
<view class=“top bottom grid”>
<label class=“title col-0”>备注</label>
<input class=“input_base input_h30 col-1” name=“bz”></input>
</view>
</view>
<view class=“btn_ok” bindtap=“powerDrawer” data-statu=“close”>确定</view>
</view>

我这边把效果图放出来吧,需要的,自己看下面地址:http://wxapp.662p.com/thread-3713-1-1.html

这是效果图:

点赞 3
收藏
评论

4 个评论

  • Inori
    Inori
    2019-04-12

    不好意思,我认为在这破平台上模态窗都应该用CoverView写……用View写的……

    2019-04-12
    赞同 2
    回复 1
    • 不才
      不才
      2019-04-15

      太多原生组件了。绕不过的

      2019-04-15
      回复
  • さよ
    さよ
    2019-04-15

    有点丑。。。

    2019-04-15
    赞同
    回复
  • meszyouh
    meszyouh
    2019-04-14

    最好的还是 css   animation 来做动画, 虽然他这个实际上也是 css  实现

    2019-04-14
    赞同
    回复
  • 韩东杰
    韩东杰
    2019-04-12

    js缺少部分:


    powerDrawer: function (e) {

    console.log(e)

    let currentStatu = e.currentTarget.dataset.statu

    this.util(currentStatu)

    },

    util: function (currentStatu) {

    /* 动画部分 */

    // 第1步:创建动画实例

    var animation = wx.createAnimation({

    duration: 200,  //动画时长

    timingFunction: "linear", //线性

    delay: 0  //0则不延迟

    });

    // 第2步:这个动画实例赋给当前的动画实例

    this.animation = animation;

    // 第3步:执行第一组动画

    animation.opacity(0).rotateX(-100).step();

    // 第4步:导出动画对象赋给数据对象储存

    this.setData({

    animationData: animation.export()

    })

    // 第5步:设置定时器到指定时候后,执行第二组动画

    setTimeout(function () {

    // 执行第二组动画

    animation.opacity(1).rotateX(0).step();

    // 给数据对象储存的第一组动画,更替为执行完第二组动画的动画对象

    this.setData({

    animationData: animation

    })

    //关闭

    if (currentStatu == "close") {

    this.setData(

    {

    showModalStatus: false

    }

    );

    }

    }.bind(this), 200)

    // 显示

    if (currentStatu == "open") {

    this.setData(

    {

    showModalStatus: true

    }

    );

    }

    }


    2019-04-12
    赞同
    回复
登录 后发表内容