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


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 相关文章推荐
Add Formatted Data to a Spreadsheet
Jun 12 Javascript
javascript ajax 仿百度分页函数
Oct 29 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 Javascript
jquery中键盘事件小结
Feb 24 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 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
在PHP中操作Excel实例代码
2010/04/29 PHP
php递归函数中使用return的注意事项
2014/01/17 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
25个优雅的jQuery Tooltip插件推荐
2011/05/25 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
2019/10/12 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
JS制作简易计算器的实例代码
2020/07/04 Javascript
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
利用Python实现命令行版的火车票查看器
2016/08/05 Python
python中range()与xrange()用法分析
2016/09/21 Python
Python中将字典转换为列表的方法
2016/09/21 Python
python实现机械分词之逆向最大匹配算法代码示例
2017/12/13 Python
浅谈Python黑帽子取代netcat
2018/02/10 Python
Python @property原理解析和用法实例
2020/02/11 Python
python实现梯度下降法
2020/03/24 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
python操作redis数据库的三种方法
2020/09/10 Python
selenium判断元素是否存在的两种方法小结
2020/12/07 Python
numba提升python运行速度的实例方法
2021/01/25 Python
迪卡侬比利时官网:Decathlon比利时
2019/12/28 全球购物
C语言编程题
2015/03/09 面试题
GWebs公司笔试题
2012/05/04 面试题
2014年个人总结范文
2015/03/09 职场文书
2015年社区流动人口工作总结
2015/05/12 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书