微信小程序 自定义对话框实例详解


Posted in Javascript onJanuary 20, 2017

微信小程序 自定义对话框实例详解

效果图:

微信小程序 自定义对话框实例详解

index.wxml:

<button type="default" bindtap="clickbtn"> 
 点击 
</button> 
<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view> 
<view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}"> 
<!--对话框标题--> 
<view class="dialog-title"> 
 请输入内容 
</view> 
<!--对话框输入部分--> 
<view class="input-view"> 
 <input type="text" bindblur="input_content" class="input-style"/> 
</view> 
<!--对话框按钮--> 
<view class="line-top">  
</view> 
<view class="btn-view"> 
 <view class="btn-cancel" bindtap="click_cancel">  
     取 消 
 </view> 
 <view class="btn-line"> 
 </view> 
 <view class="btn-cancel" bindtap="click_ok">  
     确 定 
 </view> 
</view> 
</view>

index.js:

var inputinfo = ""; 
var app = getApp() 
Page({ 
 data: { 
  animationData:"", 
  showModalStatus:false 
 }, 
  
 onLoad: function () { 
   
 }, 
 showModal: function () { 
  // 显示遮罩层 
  var animation = wx.createAnimation({ 
   duration: 200, 
   timingFunction: "linear", 
   delay: 0 
  }) 
  this.animation = animation 
  animation.translateY(300).step() 
  this.setData({ 
   animationData: animation.export(), 
   showModalStatus: true 
  }) 
  setTimeout(function () { 
   animation.translateY(0).step() 
   this.setData({ 
    animationData: animation.export() 
   }) 
  }.bind(this), 200) 
 }, 
 clickbtn:function(){ 
  if(this.data.showModalStatus){ 
   this.hideModal(); 
  }else{ 
   this.showModal(); 
  } 
 }, 
 hideModal: function () { 
  // 隐藏遮罩层 
  var animation = wx.createAnimation({ 
   duration: 200, 
   timingFunction: "linear", 
   delay: 0 
  }) 
  this.animation = animation 
  animation.translateY(300).step() 
  this.setData({ 
   animationData: animation.export(), 
  }) 
  setTimeout(function () { 
   animation.translateY(0).step() 
   this.setData({ 
    animationData: animation.export(), 
    showModalStatus: false 
   }) 
  }.bind(this), 200) 
 }, 
 click_cancel:function(){ 
  console.log("点击取消"); 
   this.hideModal(); 
 }, 
 click_ok:function(){ 
  console.log("点击了确定===,输入的信息为为==",inputinfo); 
   this.hideModal(); 
 }, 
 input_content:function(e){ 
  console.log(e); 
  inputinfo = e.detail.value;  
 } 
 
})

源码下载:http://xiazai.3water.com/201701/yuanma/modalTest(3water.com).rar

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
ie和firefox不兼容的解决方法集合
Apr 28 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
Dec 07 Javascript
巧用replace将文字表情替换为图片
Apr 17 Javascript
谈谈JavaScript异步函数发展历程
Sep 29 Javascript
angularjs创建弹出框实现拖动效果
Aug 25 Javascript
JavaScript实现的MD5算法完整实例
Feb 02 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 Javascript
Vue文本模糊匹配功能如何实现
Jul 30 Javascript
Vue前端判断数据对象是否为空的实例
Sep 02 Javascript
node中短信api实现验证码登录的示例代码
Jan 20 Javascript
JavaScript使用canvas绘制坐标和线
Apr 28 Javascript
Vue实例简单方法介绍
Jan 20 #Javascript
微信小程序 Toast自定义实例详解
Jan 20 #Javascript
JavaScript判断浏览器及其版本信息
Jan 20 #Javascript
JS中传递参数的几种不同方法比较
Jan 20 #Javascript
JS出现失效的情况总结
Jan 20 #Javascript
JSON 数据详解及实例代码分析
Jan 20 #Javascript
Angular ui.bootstrap.pagination分页
Jan 20 #Javascript
You might like
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
Knockoutjs快速入门(经典)
2012/12/24 Javascript
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
js中的preventDefault与stopPropagation详解
2014/01/29 Javascript
js调试系列 控制台命令行API使用方法
2014/06/18 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
jquery实现简单的banner轮播效果【实例】
2016/03/30 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
JavaScript利用正则表达式替换字符串中的内容
2016/12/12 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
webpack3之loader全解析
2017/10/26 Javascript
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
jQuery+PHP实现上传裁剪图片
2020/06/29 jQuery
Python进程间通信用法实例
2015/06/04 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
2014年学校办公室工作总结
2014/12/19 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)
2022/02/12 Servers
Python借助with语句实现代码段只执行有限次
2022/03/23 Python