AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

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

51自学网 http://www.wanshiok.com
微信小程序,自定义对话框,微信小程序,自定义对话框实现代码,微信小程序,对话框

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

效果图:


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.wanshiok.com/201701/yuanma/modalTest(wanshiok.com).rar

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!


微信小程序,自定义对话框,微信小程序,自定义对话框实现代码,微信小程序,对话框  
上一篇:微信小程序 天气预报开发实例代码源码  下一篇:Vue实例简单方法介绍