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


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在IE下使用未闭合的xml代码创建元素时的Bug介绍
Jan 10 Javascript
js获得页面的高度和宽度的方法
Feb 23 Javascript
javascript折半查找详解
Jan 26 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
jQuery.deferred对象使用详解
Mar 18 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
Jun 12 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
Sep 27 Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 11 Javascript
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
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 session 预定义数组
2009/03/16 PHP
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
PHP将HTML转换成文本的实现代码
2015/01/21 PHP
配置eAccelerator和XCache扩展来加速PHP程序的执行
2015/12/22 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
PHP和MySql中32位和64位的整形范围是多少
2016/02/18 PHP
javascript (用setTimeout而非setInterval)
2011/12/28 Javascript
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
2014/02/12 Javascript
自己封装的javascript事件队列函数版
2014/06/12 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
jQuery的几个我们必须了解的特点
2015/05/03 Javascript
javascript事件模型介绍
2016/05/31 Javascript
js实现滑动到页面底部自动加载更多功能
2017/02/15 Javascript
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
vue实现简单计算商品价格
2020/09/14 Javascript
python爬取网页转换为PDF文件
2018/06/07 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
浅谈Python爬虫基本套路
2019/03/25 Python
python各类经纬度转换的实例代码
2019/08/08 Python
Python搭建HTTP服务过程图解
2019/12/14 Python
python实现word文档批量转成自定义格式的excel文档的思路及实例代码
2020/02/21 Python
python中Mako库实例用法
2020/12/31 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
艾滋病宣传标语
2014/06/25 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书
如何用PHP实现多线程编程
2021/05/26 PHP
一文搞懂python异常处理、模块与包
2021/06/26 Python
Python实现文字pdf转换图片pdf效果
2022/04/03 Python