微信小程序 自定义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 Onunload与Onbeforeunload使用小结
Dec 31 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
Sep 12 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 Javascript
JS常见问题整理(持续更新)
Aug 06 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
Jul 14 Javascript
javascript格式化指定日期对象的方法
Apr 21 Javascript
Angular Js文件上传之form-data
Aug 28 Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 Javascript
jQuery EasyUI Draggable拖动组件
Mar 01 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
javascript使用链接跨域下载图片
Nov 01 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
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+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
php数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
2011/10/31 PHP
PHP通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
php生成mysql的数据字典
2016/07/07 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
JavaScript继承方式实例
2010/10/29 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
js实现select选择框效果及美化
2016/08/19 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
jQuery ajax请求struts action实现异步刷新
2017/04/19 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
详解Python requests 超时和重试的方法
2018/12/18 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
python 实现让字典的value 成为列表
2019/12/16 Python
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
2017/07/31 HTML / CSS
西班牙在线药店:DosFarma
2020/03/28 全球购物
制衣厂各岗位职责
2013/12/02 职场文书
生产助理岗位职责
2014/06/18 职场文书
力学专业求职信
2014/07/23 职场文书
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python