博客
关于我
小程序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支持的事务隔离级别,以及悲观锁和乐观锁的原理和应用场景?
查看>>
mysql支持表情
查看>>
MySQL支撑百万级流量高并发的网站部署详解
查看>>
MySQL改动rootpassword的多种方法
查看>>
mysql数据分组索引_MYSQL之索引配置方法分类
查看>>
mysql数据取差,mysql屏蔽主外键关联关系
查看>>
MySQL数据和Redis缓存一致性方案详解
查看>>
MySQL数据和Redis缓存一致性方案详解
查看>>
Mysql数据库 InnoDB存储引擎中Master Thread的执行流程
查看>>
MySQL数据库 范式
查看>>
Mysql数据库B-Tree索引
查看>>
mysql数据库io空闲_mysql数据库磁盘io高的排查
查看>>
mysql数据库root密码忘记,查看或修改的解决方法
查看>>
MySQL数据库SQL注入靶场sqli通关实战(附靶场安装包)
查看>>
MYSQL数据库下载安装(Windows版本)
查看>>
MySQL数据库与Informix:能否创建同名表?
查看>>
mysql数据库中的数据如何加密呢?mysql8.0自带新特性
查看>>
MySQL数据库优化
查看>>
MySQL数据库优化总结
查看>>
MySQL数据库入门看这一篇文章就够了
查看>>