微信小程序 弹窗自定义实例代码


Posted in Javascript onMarch 08, 2017

微信小程序 弹窗

首先wxml代码:

<view class="myToast" hidden="{{nullHouse}}">暂无有关信息</view>
<view bindtap="clickArea">点击此处</view>

注:hidden属性用于切换比较频繁的地方。

wxss代码设置弹窗样式:

.myToast{
 width:240rpx;
 height:130rpx;
 line-height: 130rpx;
 margin:80rpx 35%;
 border-radius:20rpx;
 background-color: rgb(114,113,113);
 color:rgb(255,255,255);
 font-size: 36rpx;
 text-align: center;
 position: absolute;
 z-index: 100;
 opacity: 0.85;
}

js:

Page({

 data:{
  nullHouse:true, //先设置隐藏
    },
 onLoad:function(options){
   // 页面初始化 options为页面跳转所带来的参数
 },
 onReady:function(){
  // 页面渲染完成
 },
 onShow:function(){
  // 页面显示
 },
 onHide:function(){
  // 页面隐藏
 },
 onUnload:function(){
  // 页面关闭
 },
 clickArea:function(){
  var that = this;
  this.setData({
  nullHouse:false, //弹窗显示
  }) 
  setTimeout(function(){
  that.data.nullHouse = true, //1秒之后弹窗隐藏
   },1000)
 },
})

 注:setTimeout()函数是异步的,当计算机执行到setTimeout时,此任务先暂停并保存,继续执行后续未完成的任务,当条件满足时,再将setTimeout的执行任务放回任务队列的后面,等待执行。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
js去字符串前后空格5种实现方法及比较
Apr 03 Javascript
Jquery实现控件的隐藏和显示实例
Feb 08 Javascript
js中通过父级进行查找定位元素
Jun 15 Javascript
jQuery中andSelf()方法用法实例
Jan 08 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
jquery实现全选功能效果的实现代码
May 05 Javascript
JavaScript数组方法大全(推荐)
Jul 05 Javascript
vue.js实现请求数据的方法示例
Feb 07 Javascript
解决webpack打包速度慢的解决办法汇总
Jul 06 Javascript
基于require.js的使用(实例讲解)
Sep 07 Javascript
对vue.js中this.$emit的深入理解
Feb 23 Javascript
深入了解JavaScript 防抖和节流
Sep 12 Javascript
jQuery实现图片滑动效果
Mar 08 #Javascript
jquery实现折叠菜单效果【推荐】
Mar 08 #Javascript
JS实现根据密码长度显示安全条功能
Mar 08 #Javascript
jquery实现自定义图片裁剪功能【推荐】
Mar 08 #Javascript
bootstrap实现动态进度条效果
Mar 08 #Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 #Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 #Javascript
You might like
PHP版本如何选择?应该使用哪个版本?
2015/05/13 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
ExtJS4中使用mixins实现多继承示例
2013/12/03 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
js实现右键菜单功能
2016/11/28 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
详解React 元素渲染
2020/07/07 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
vue下载二进制流图片操作
2020/10/26 Javascript
vue实现简单的登录弹出框
2020/10/26 Javascript
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
Python中的jquery PyQuery库使用小结
2014/05/13 Python
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
Python在不同目录下导入模块的实现方法
2017/10/27 Python
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
python分治法求二维数组局部峰值方法
2018/04/03 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
汉森批发:Hansen Wholesale
2018/05/24 全球购物
东方通信股份有限公司VC面试题
2014/08/27 面试题
华为python面试题
2016/05/03 面试题
Weblogic和WebSphere不同特点
2012/05/09 面试题
班级德育工作实施方案
2014/02/21 职场文书
会计岗位职责模板
2014/03/12 职场文书
住院医师规范化培训实施方案
2014/06/12 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
导游词之广东佛山(南风古灶)
2019/09/24 职场文书