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

你可能感兴趣的文章
Luogu2973:[USACO10HOL]赶小猪
查看>>
mabatis 中出现< 以及> 代表什么意思?
查看>>
Mac book pro打开docker出现The data couldn’t be read because it is missing
查看>>
MAC M1大数据0-1成神篇-25 hadoop高可用搭建
查看>>
mac mysql 进程_Mac平台下启动MySQL到完全终止MySQL----终端八步走
查看>>
Mac OS 12.0.1 如何安装柯美287打印机驱动,刷卡打印
查看>>
MangoDB4.0版本的安装与配置
查看>>
Manjaro 24.1 “Xahea” 发布!具有 KDE Plasma 6.1.5、GNOME 46 和最新的内核增强功能
查看>>
mapping文件目录生成修改
查看>>
MapReduce程序依赖的jar包
查看>>
mariadb multi-source replication(mariadb多主复制)
查看>>
MariaDB的简单使用
查看>>
MaterialForm对tab页进行隐藏
查看>>
Member var and Static var.
查看>>
memcached高速缓存学习笔记001---memcached介绍和安装以及基本使用
查看>>
memcached高速缓存学习笔记003---利用JAVA程序操作memcached crud操作
查看>>
Memcached:Node.js 高性能缓存解决方案
查看>>
memcache、redis原理对比
查看>>
memset初始化高维数组为-1/0
查看>>
Metasploit CGI网关接口渗透测试实战
查看>>