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


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 相关文章推荐
jquery tools之tooltip
Jul 25 Javascript
一个简单的javascript类定义例子
Sep 12 Javascript
javascript中数组中求最大值示例代码
Dec 18 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
Sep 26 Javascript
基于canvas实现的钟摆效果完整实例
Jan 26 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
jQuery向webApi提交post json数据
Jan 16 Javascript
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
js实现点击展开隐藏效果(实例代码)
Sep 28 Javascript
layui动态加载多表头的实例
Sep 05 Javascript
js 数据类型判断的方法
Dec 03 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
ionCube 一款类似zend的PHP加密/解密工具
2010/07/25 PHP
php文档更新介绍
2011/07/22 PHP
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
php中mkdir()函数的权限问题分析
2016/09/24 PHP
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
javascript读取Xml文件做一个二级联动菜单示例
2014/03/17 Javascript
Javascript实现字数统计
2015/07/03 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
JS数据类型分类及常用判断方法
2020/11/19 Javascript
一篇不错的Python入门教程
2007/02/08 Python
python实现将英文单词表示的数字转换成阿拉伯数字的方法
2015/07/02 Python
python扫描proxy并获取可用代理ip的实例
2017/08/07 Python
python中 logging的使用详解
2017/10/25 Python
Python实现OpenCV的安装与使用示例
2018/03/30 Python
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
使用numba对Python运算加速的方法
2018/10/15 Python
python数组循环处理方法
2019/08/26 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
python自动识别文本编码格式代码
2019/12/26 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
Python利用socket模块开发简单的端口扫描工具的实现
2021/01/27 Python
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
给校长的一封建议书
2014/03/12 职场文书
2014年教师党员自我评议
2014/09/19 职场文书
浅谈redis五大数据结构和使用场景
2021/04/12 Redis
SpringBoot SpringEL表达式的使用
2021/07/25 Java/Android
利用python做数据拟合详情
2021/11/17 Python
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android