小程序自定义弹框效果


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 相关文章推荐
网页常用特效代码整理
Jun 23 Javascript
js用图作提交按钮或超连接
Mar 26 Javascript
javascript结合Canvas 实现简易的圆形时钟
Mar 11 Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
Nov 09 Javascript
AngularJS 中的数据源的循环输出
Oct 12 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
Jul 17 Javascript
详解vue路由
Aug 05 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 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错误信息方法的详解
2013/06/09 PHP
PHP中比较时间大小实例
2014/08/21 PHP
两种php去除二维数组的重复项方法
2015/11/04 PHP
linux下为php添加iconv模块的方法
2016/02/28 PHP
php简单复制文件的方法
2016/05/09 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
JavaScript SetInterval与setTimeout使用方法详解
2013/11/15 Javascript
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
JavaScript的六种继承方式(推荐)
2017/06/26 Javascript
新手入门js闭包学习过程解析
2019/10/08 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python实现代码行数统计示例分享
2014/02/10 Python
Python学习笔记之os模块使用总结
2014/11/03 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
Python模拟简单电梯调度算法示例
2018/08/20 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
个人贷款授权委托书样本
2014/10/07 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL