软件测试工程师 mysql 观察者模式 authentication triggers ant vb6 progressjs vue状态管理 十大erp系统 angular视频 ppt视频教程下载 在线考试系统代码 mysql当前时间减一天 手机banner常用尺寸 mysql倒序 mysql更新多个字段 excel被保护怎么解除 yml文件注释 升级python版本 java创建字符串数组 表白网页源码 python环境安装教程 python的lambda函数 java教程 java环境 安装java环境 java文档 java操作数据库 java重命名 linux安装系统 数据库系统概论第五版 动态加载js 自动回复机器人 微信骰子表情包 办公室复印机使用方法 梦幻手游助手 cubase下载 批量插入数据 babelrc
当前位置: 首页 > 学习教程  > 编程语言

小程序自定义弹框

2020/11/4 14:29:19 文章标签:

小程序自定义弹框 wxml <!--button--> <view class"btn" bindtap"powerDrawer" data-statu"open">来点我呀</view><!--mask--> <view class"drawer_screen" bindtap"powerDrawer" data-statu&…

小程序自定义弹框

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>

wxss

/*button*/
.btn {
  width: 80%;
  padding: 20rpx 0;
  border-radius: 10rpx;
  text-align: center;
  margin: 40rpx 10%;
  background: #000;
  color: #fff;
}
 
/*mask*/
.drawer_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background: #000;
  opacity: 0.75;
  overflow: hidden;
}
 
/*content*/
.drawer_box {
  width: 650rpx;
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 1001;
  background: #FAFAFA;
  margin: -150px 50rpx 0 50rpx;
  border-radius: 3px;
}
 
.drawer_title{
  padding:15px;
  font: 20px "microsoft yahei";
  text-align: center;
}
.drawer_content {
  height: 210px;
  overflow-y: scroll; /*超出父盒子高度可滚动*/
}
 
.btn_ok{
  padding: 10px;
  font: 20px "microsoft yahei";
  text-align: center;
  border-top: 1px solid #E8E8EA;
  color: #3CC51F;
}
 
.top{
    padding-top:8px;
}
.bottom {
    padding-bottom:8px;
}
.title {
    height: 30px;
    line-height: 30px;
    width: 160rpx;
    text-align: center;
    display: inline-block;
    font: 300 28rpx/30px "microsoft yahei";
}
 
.input_base {
    border: 2rpx solid #ccc;
    padding-left: 10rpx;
    margin-right: 50rpx;
}
.input_h30{
    height: 30px;
    line-height: 30px;
}
.input_h60{
    height: 60px;
}
.input_view{
    font: 12px "microsoft yahei";
    background: #fff;
    color:#000;
    line-height: 30px;
}
 
input {
    font: 12px "microsoft yahei";
    background: #fff;
    color:#000 ;
}
radio{
    margin-right: 20px;
}
.grid { display: -webkit-box; display: box; }
.col-0 {-webkit-box-flex:0;box-flex:0;}
.col-1 {-webkit-box-flex:1;box-flex:1;}
.fl { float: left;}
.fr { float: right;}

js

Page({
  data: {
    showModalStatus: false
  },
  powerDrawer: function (e) {
    var 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
        }
      );
    }
  }
  
})  

仅供参考


本文链接: http://www.dtmao.cc/news_show_350165.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?