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

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

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

效果图：

index.wxml：

点击

请输入内容

取 消

确 定

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({

animationDatahttp://: 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.jb51.net/201701/yuanma/modalTest(jb51.net).rar

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。