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


Posted in Javascript onJune 12, 2017

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

Toast样式可以根据需求自定义,本例中是圆形

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

<!--按钮-->  
<view class="btn" bindtap="btn_toast">自定义Toast</view>  
<!--以下为toast显示的内容 opacity为透明度-->  
<view class="toast_box" style="opacity:{{0.9}}" wx:if="{{isShowToast}}">   
  {{toastText}}   
</view>  
<view class="toast_box" style="opacity:{{0.9}}" wx:if="{{isShowToast}}">   
  {{toastText1}}   
</view>
Page {  
 background: #f9f9f9;  
}  
/*按钮*/  
.btn {  
 width: 20%;   
 margin-left: 38%; 
 margin-top: 100rpx; 
 text-align: center;  
 border-radius: 10rpx;  
 border: 10px solid #f00;  
 background: #f00; 
 color: #fff;  
 font-size: 22rpx; 
}  
/*toast*/  
.toast_box {  
 width: 30%;  
 height: 221rpx; 
 margin-top: 60rpx;  
 margin-left: 35%; 
 text-align: center;  
 border-radius: 166rpx;  
 background: #f00; 
 color: #fff;  
 font-size: 32rpx; 
 line-height: 220rpx;  
}
Page({ 
 
 /** 
  * 页面的初始数据 
  */ 
 data: { 
  //toast默认不显示  
  isShowToast: false   
 }, 
 showToast: function () { 
  var _this = this; 
  // toast时间  
  _this.data.count = parseInt(_this.data.count) ? parseInt(_this.data.count) : 1000; 
  // 显示toast  
  _this.setData({ 
   isShowToast: true, 
  }); 
  // 定时器关闭  
  setTimeout(function () { 
   _this.setData({ 
    isShowToast: false 
   }); 
  }, _this.data.count); 
 }, 
 /* 点击按钮 */ 
 btn_toast: function () { 
  console.log("点击了按钮") 
  //设置toast时间,toast内容  
  this.setData({ 
   count: 1500, 
   toastText: '自定义', 
   toastText1: 'Toast' 
  }); 
  this.showToast(); 
 },  
 /** 
  * 生命周期函数--监听页面加载 
  */ 
 onLoad: function (options) { 
  
 },})

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

Javascript 相关文章推荐
javascript attachEvent和addEventListener使用方法
Mar 19 Javascript
JavaScript 学习笔记一些小技巧
Mar 28 Javascript
JS常用正则表达式总结
Nov 12 Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
javascript相关事件的几个概念
May 21 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 Javascript
JS实现的网页背景闪电闪烁效果代码
Oct 17 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
May 07 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
Sep 19 Javascript
微信小程序开发之Tabbar实例详解
Jan 09 Javascript
js字符串处理之绝妙的代码
Apr 05 Javascript
JS实现页面侧边栏效果探究
Jan 08 Javascript
Angular4 中常用的指令入门总结
Jun 12 #Javascript
Node.js 8 中的 util.promisify的详解
Jun 12 #Javascript
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 #jQuery
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 #Javascript
JavaScript初学者必看“new”
Jun 12 #Javascript
详解vue.js 开发环境搭建最简单攻略
Jun 12 #Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
Jun 12 #Javascript
You might like
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
ThinkPHP中create()方法自动验证表单信息
2017/04/28 PHP
php 浮点数比较方法详解
2017/05/05 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
修复IE9&amp;safari 的sort方法
2011/10/21 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
2013/06/26 Javascript
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
基于jQuery实现多层次的手风琴效果附源码
2015/09/21 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
Vue 自定义指令功能完整实例
2019/09/17 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
[56:35]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第一局
2016/03/06 DOTA
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
python+mysql实现简单的web程序
2014/09/11 Python
Python中subprocess模块用法实例详解
2015/05/20 Python
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
python3获取url文件大小示例代码
2019/09/18 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
土木工程专业推荐信
2014/02/19 职场文书
心得体会的写法
2014/09/05 职场文书
会计工作能力自我评价
2015/03/05 职场文书
建国大业观后感600字
2015/06/01 职场文书
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle
JavaCV实现照片马赛克效果
2022/01/22 Java/Android
HDFS免重启挂载新磁盘
2022/04/06 Servers