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


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 相关文章推荐
获取URL地址中的文件名和参数的javascript代码
Sep 02 Javascript
js控制淡入淡出示例代码
Nov 12 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
基于javascript实现单选及多选的向右和向左移动实例
Jul 25 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
May 30 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
JavaScript导航脚本判断当前导航
Jul 12 Javascript
jQuery简单实现彩色云标签效果示例
Aug 01 Javascript
基于jquery实现的鼠标悬停提示案例
Dec 11 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
Jan 11 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
js实现三角形粒子运动
Sep 22 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实现对二维数组某个键排序的方法
2016/09/14 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
jquery插件 autoComboBox 下拉框
2010/12/22 Javascript
StringTemplate遇见jQuery冲突的解决方法
2011/09/22 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
js获取ajax返回值代码
2014/04/30 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
使用javascript插入样式
2016/03/14 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
vue2.0父子组件间通信的实现方法
2017/04/19 Javascript
vue.js的安装方法
2017/05/12 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
python2.7删除文件夹和删除文件代码实例
2013/12/18 Python
Python实现PS滤镜Fish lens图像扭曲效果示例
2018/01/29 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
师范毕业生自荐信
2013/10/17 职场文书
师范生实习的个人自我鉴定
2013/10/20 职场文书
遗嘱公证书标准样本
2014/04/08 职场文书
C++程序员求职信范文
2014/04/14 职场文书
售后客服个人自我评价
2014/09/14 职场文书
镇班子对照检查材料思想汇报
2014/09/24 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
廉洁自律承诺书2015
2015/01/22 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL
使用Python解决图表与画布的间距问题
2022/04/11 Python