博客
关于我
小程序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/

你可能感兴趣的文章
mysql generic安装_MySQL 5.6 Generic Binary安装与配置_MySQL
查看>>
Mysql group by
查看>>
MySQL I 有福啦,窗口函数大大提高了取数的效率!
查看>>
mysql id自动增长 初始值 Mysql重置auto_increment初始值
查看>>
MySQL in 太多过慢的 3 种解决方案
查看>>
MySQL InnoDB 三大文件日志,看完秒懂
查看>>
Mysql InnoDB 数据更新导致锁表
查看>>
Mysql Innodb 锁机制
查看>>
MySQL InnoDB中意向锁的作用及原理探
查看>>
MySQL InnoDB事务隔离级别与锁机制深入解析
查看>>
Mysql InnoDB存储引擎 —— 数据页
查看>>
Mysql InnoDB存储引擎中的checkpoint技术
查看>>
Mysql InnoDB存储引擎中缓冲池Buffer Pool、Redo Log、Bin Log、Undo Log、Channge Buffer
查看>>
MySQL InnoDB引擎的锁机制详解
查看>>
Mysql INNODB引擎行锁的3种算法 Record Lock Next-Key Lock Grap Lock
查看>>
mysql InnoDB数据存储引擎 的B+树索引原理
查看>>
mysql innodb通过使用mvcc来实现可重复读
查看>>
mysql insert update 同时执行_MySQL进阶三板斧(三)看清“触发器 (Trigger)”的真实面目...
查看>>
mysql interval显示条件值_MySQL INTERVAL关键字可以使用哪些不同的单位值?
查看>>
Mysql join原理
查看>>