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


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 相关文章推荐
JavaScript 学习笔记(十六) js事件
Feb 01 Javascript
EasyUI中的tree用法介绍
Nov 01 Javascript
jquery实现excel导出的方法
Apr 04 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 Javascript
jQuery插件分享之分页插件jqPagination
Jun 06 Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
学习vue.js中class与style绑定
Dec 03 Javascript
javascript垃圾收集机制的原理分析
Dec 08 Javascript
拖动时防止选中
Feb 03 Javascript
vue实现的树形结构加多选框示例
Feb 02 Javascript
微信小程序聊天功能的示例代码
Jan 13 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之uniqid()函数用法
2014/11/03 PHP
yii分页组件用法实例分析
2015/12/28 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
PHP AjaxForm提交图片上传并显示图片源码
2016/11/29 PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
2018/05/28 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
Bootstrap每天必学之表格
2015/11/23 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
分享Python开发中要注意的十个小贴士
2016/08/30 Python
Python中装饰器兼容加括号和不加括号的写法详解
2017/07/05 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
详解Python requests 超时和重试的方法
2018/12/18 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
python使用python-pptx删除ppt某页实例
2020/02/14 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
平面设计岗位职责
2013/12/14 职场文书
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
继承公证书样本
2014/04/04 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
我爱我班主题班会
2015/08/13 职场文书