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


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兼容标准的表格变色效果
Jun 28 Javascript
父子窗体间传递JSON格式的数据的代码
Dec 25 Javascript
javascript 按键事件(兼容各浏览器)
Dec 20 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 Javascript
jquery队列函数用法实例
Dec 16 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
Nov 09 Javascript
ES6新特性七:数组的扩充详解
Apr 21 Javascript
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
vue 虚拟dom的patch源码分析
Mar 01 Javascript
Vue 图片压缩并上传至服务器功能
Jan 15 Javascript
深入webpack打包原理及loader和plugin的实现
May 06 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
把77A收信机改造成收音机
2021/03/02 无线电
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
分享PHP header函数使用教程
2013/09/05 PHP
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
PHP结合Vue实现滚动底部加载效果
2017/12/17 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
jquery ajax 登录验证实现代码
2009/09/23 Javascript
基于jQuery的倒计时实现代码
2012/05/30 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
微信小程序前端源码逻辑和工作流
2016/09/25 Javascript
JQuery中解决重复动画的方法
2016/10/17 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
vue弹窗消息组件的使用方法
2020/09/24 Javascript
vue-router中scrollBehavior的巧妙用法
2018/07/09 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
原生js实现弹窗消息动画
2020/11/20 Javascript
[02:17]2016国际邀请赛中国区预选赛VG战队领队采访
2016/06/26 DOTA
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
pytorch中的自定义数据处理详解
2020/01/06 Python
利用python 读写csv文件
2020/09/10 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
2019/02/18 HTML / CSS
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
学生社团文化节开幕式主持词
2014/03/28 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
pandas中关于apply+lambda的应用
2022/02/28 Python