本文共 3290 字,大约阅读时间需要 10 分钟。
// pages/dialog/dialog.jsPage({ /** * 页面的初始数据 */ data: { showModalStatus: false }, click1:function(){ wx.showToast({ title: '纯文字弹窗', icon: 'none', //如果要纯文本,不要icon,将值设为'none' duration: 2000 }) }, click2:function(){ wx.showModal({ title: 'confirm的弹窗', content: '确认要删除该项吗?', success: function (res) { if (res.confirm) { console.log('点击确认回调') } else { console.log('点击取消回调') } } }) }, click3:function(){ wx.showToast({ title: '成功提示弹窗', icon: '', //默认值是success,就算没有icon这个值,就算有其他值最终也显示success duration: 2000, //停留时间 }) }, click4:function(){ wx.showToast({ title: '带蒙层的弹窗', duration: 200, mask:true //是否有透明蒙层,默认为false //如果有透明蒙层,弹窗的期间不能点击文档内容 }) }, click4:function(){ wx.showToast({ title: '带蒙层的弹窗', duration: 2000, mask:true //是否有透明蒙层,默认为false //如果有透明蒙层,弹窗的期间不能点击文档内容 }) }, click5:function(){ wx.showLoading({ title:'加载中...' }); }, click6:function(){ wx.showToast({ title: '自定义图标弹窗', image: '../../icons/nav.png', //image的优先级会高于icon duration: 2000 }) }, click7:function(){ wx.showActionSheet({ itemList: ['A', 'B', 'C'], success: function (res) { console.log(res); } }) }, powerDrawer:function(e){ var currentStatu = e.currentTarget.dataset.statu; this.util(currentStatu) }, util: function(currentStatu){ /* 动画部分 */ // 第1步:创建动画实例 var animation = wx.createAnimation({ duration: 200, //动画时长 timingFunction: "linear", //线性 delay: 0 //0则不延迟 }); // 第2步:这个动画实例赋给当前的动画实例 // this.animation = animation;// // 第3步:执行第一组动画 opacity()起始透明度 //3维空间上x轴上一个旋转 animation.opacity(0).rotateX(-100).step(); // 第4步:导出动画对象赋给数据对象储存 this.setData({ animationData: animation.export() }) // 第5步:设置定时器到指定时候后,执行第二组动画 setTimeout(function () { // 执行第二组动画 animation.opacity(1).rotateX(0).step(); // 给数据对象储存的第一组动画,更替为执行完第二组动画的动画对象 this.setData({ animationData: animation }) //关闭 if (currentStatu == "close") { this.setData( { showModalStatus: false } ); } }.bind(this), 200) // 显示 if (currentStatu == "open") { this.setData( { showModalStatus: true } ); } }})
纯文本提示 取消确认提示 成功提示 带蒙层的弹窗 加载中提示 自定义图标弹窗 有列表弹窗 动画弹窗
/* pages/dialog/dialog.wxss */.title { height: 30px; line-height: 30px; width: 160rpx; text-align: center; display: inline-block; font: 300 28rpx/30px "microsoft yahei";}.col-0 {-webkit-box-flex:0;box-flex:0;}
转载地址:http://zzfcz.baihongyu.com/