博客
关于我
小程序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-connector-java.jar乱码,最新版mysql-connector-java-8.0.15.jar,如何愉快的进行JDBC操作...
查看>>
mysql-connector-java各种版本下载地址
查看>>
mysql-EXPLAIN
查看>>
MySQL-Explain的详解
查看>>
mysql-group_concat
查看>>
MySQL-redo日志
查看>>
MySQL-【1】配置
查看>>
MySQL-【4】基本操作
查看>>
Mysql-丢失更新
查看>>
Mysql-事务阻塞
查看>>
Mysql-存储引擎
查看>>
mysql-开启慢查询&所有操作记录日志
查看>>
MySQL-数据目录
查看>>
MySQL-数据页的结构
查看>>
MySQL-架构篇
查看>>
MySQL-索引的分类(聚簇索引、二级索引、联合索引)
查看>>
Mysql-触发器及创建触发器失败原因
查看>>
MySQL-连接
查看>>
mysql-递归查询(二)
查看>>
MySQL5.1安装
查看>>