小程序自定义弹框效果


Posted in Javascript onNovember 16, 2020

本文实例为大家分享了小程序自定义弹框效果的具体代码,供大家参考,具体内容如下

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
    }
   );
  }
 }
 
})

仅供参考。

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的排序算法代码
Feb 22 Javascript
js中Image对象以及对其预加载处理示例
Nov 20 Javascript
js中switch case循环实例代码
Dec 30 Javascript
JS实现的自定义右键菜单实例二则
Sep 01 Javascript
JavaScript转换与解析JSON方法实例详解
Nov 24 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
jquery pagination分页插件使用详解(后台struts2)
Jan 22 Javascript
JavaScript中的工厂函数(推荐)
Mar 08 Javascript
详解js几个绕不开的事件兼容写法
Aug 30 Javascript
JavaScript实现区块链
Mar 14 Javascript
bootstrap下拉分页样式 带跳转页码
Dec 29 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 #Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 #Javascript
小程序实现上下切换位置
Nov 16 #Javascript
小程序实现点击tab切换左右滑动
Nov 16 #Javascript
微信小程序实现滚动Tab选项卡
Nov 16 #Javascript
小程序实现tab标签页
Nov 16 #Javascript
vue+Element-ui实现登录注册表单
Nov 17 #Javascript
You might like
PHP SQLite类
2009/05/07 PHP
PHP实现采集中国天气网未来7天天气
2014/10/15 PHP
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
深入理解PHP原理之执行周期分析
2016/06/01 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
jquery图片上下tab切换效果
2011/03/18 Javascript
Jquery Ajax的Get方式时需要注意URL地方
2011/04/07 Javascript
浅谈jquery回调函数callback的使用
2015/01/30 Javascript
JavaScript实现控制打开文件另存为对话框的方法
2015/04/17 Javascript
jQuery实现form表单元素序列化为json对象的方法
2015/12/09 Javascript
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
JavaScript实现自动切换图片代码
2016/10/11 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
js实现双人五子棋小游戏
2020/05/28 Javascript
用Python实现换行符转换的脚本的教程
2015/04/16 Python
python tkinter控件布局项目实例
2019/11/04 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
党员公开承诺书
2014/03/25 职场文书
预备党员承诺书
2014/03/25 职场文书
车辆转让协议书
2014/09/24 职场文书
后备干部推荐材料
2014/12/24 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
python基础之匿名函数详解
2021/04/21 Python
详解JS WebSocket断开原因和心跳机制
2021/05/07 Javascript
Python中22个万用公式的小结
2021/07/21 Python