博客
关于我
小程序Dialog弹出窗
阅读量:538 次
发布时间:2019-03-07

本文共 3290 字,大约阅读时间需要 10 分钟。

js

// 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        }      );    }  }})

wxml

纯文本提示
取消确认提示
成功提示
带蒙层的弹窗
加载中提示
自定义图标弹窗
有列表弹窗
动画弹窗
弹窗标题
标题
标题
标题
标题
备注
确 认

wxss

/* 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/

你可能感兴趣的文章
MSEdgeDriver (Chromium) 不适用于版本 >= 79.0.313 (Canary)
查看>>
MsEdgeTTS开源项目使用教程
查看>>
msf
查看>>
MSSQL数据库查询优化(一)
查看>>
MSSQL数据库迁移到Oracle(二)
查看>>
MSSQL日期格式转换函数(使用CONVERT)
查看>>
MSTP多生成树协议(第二课)
查看>>
MSTP是什么?有哪些专有名词?
查看>>
Mstsc 远程桌面链接 And 网络映射
查看>>
Myeclipse常用快捷键
查看>>
MyEclipse更改项目名web发布名字不改问题
查看>>
MyEclipse用(JDBC)连接SQL出现的问题~
查看>>
mt-datetime-picker type="date" 时间格式 bug
查看>>
myeclipse的新建severlet不见解决方法
查看>>
MyEclipse设置当前行背景颜色、选中单词前景色、背景色
查看>>
Mtab书签导航程序 LinkStore/getIcon SQL注入漏洞复现
查看>>
myeclipse配置springmvc教程
查看>>
MyEclipse配置SVN
查看>>
MTCNN 人脸检测
查看>>
MyEcplise中SpringBoot怎样定制启动banner?
查看>>