微信小程序实战之自定义toast(6)


Posted in Javascript onApril 18, 2017

微信提供了一个toast的api  wx.showToast()
相关连接:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html#wxshowtoastobject 

本来是比较好的,方便使用,但是这个toast会显示出图标,而且不能去除。
假设:我们执行完业务的时候,toast一下,当执行成功的时候,效果还可以接受,如下图:

 微信小程序实战之自定义toast(6)

但是,当执行失败的时候,如下图:

失败了,你还显示个扣扣图案,那到底是成功还是失败??这肯定是不能接受的。

若是给老板看到这种效果,又是一顿臭骂,程序猿的委屈

微信小程序实战之自定义toast(6)

下面介绍一个自定义的toast

效果:

微信小程序实战之自定义toast(6) 

具体实现:
wxml:

<!--按钮--> 
<view style="{{isShowToast?'position:fixed;':''}}"> 
 <view class="btn" bindtap="clickBtn">button</view> 
</view> 
 
<!--mask--> 
<view class="toast_mask" wx:if="{{isShowToast}}"></view> 
<!--以下为toast显示的内容--> 
<view class="toast_content_box" wx:if="{{isShowToast}}"> 
 <view class="toast_content"> 
 <view class="toast_content_text"> 
  {{toastText}} 
 </view> 
 </view> 
</view>

wxss:

Page { 
 background: #fff; 
} 
/*按钮*/ 
.btn { 
 font-size: 28rpx; 
 padding: 15rpx 30rpx; 
 width: 100rpx; 
 margin: 20rpx; 
 text-align: center; 
 border-radius: 10rpx; 
 border: 1px solid #000; 
} 
/*mask*/ 
.toast_mask { 
 opacity: 0; 
 width: 100%; 
 height: 100%; 
 overflow: hidden; 
 position: fixed; 
 top: 0; 
 left: 0; 
 z-index: 888; 
} 
/*toast*/ 
.toast_content_box { 
 display: flex; 
 width: 100%; 
 height: 100%; 
 justify-content: center; 
 align-items: center; 
 position: fixed; 
 z-index: 999; 
} 
.toast_content { 
 width: 50%; 
 padding: 20rpx; 
 background: rgba(0, 0, 0, 0.5); 
 border-radius: 20rpx; 
} 
.toast_content_text { 
 height: 100%; 
 width: 100%; 
 color: #fff; 
 font-size: 28rpx; 
 text-align: center; 
}

js:

Page({ 
 data: { 
 //toast默认不显示 
 isShowToast: false 
 }, 
 showToast: function () { 
 var _this = this; 
 // toast时间 
 _this.data.count = parseInt(_this.data.count) ? parseInt(_this.data.count) : 3000; 
 // 显示toast 
 _this.setData({ 
  isShowToast: true, 
 }); 
 // 定时器关闭 
 setTimeout(function () { 
  _this.setData({ 
  isShowToast: false 
  }); 
 }, _this.data.count); 
 }, 
 /* 点击按钮 */ 
 clickBtn: function () { 
 console.log("你点击了按钮") 
 //设置toast时间,toast内容 
 this.setData({ 
  count: 1500, 
  toastText: 'Michael's Toast' 
 }); 
 this.showToast(); 
 } 
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 中的 call 和 apply使用介绍
Feb 22 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
使用js的replace()方法查找字符示例代码
Oct 28 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
Dec 16 Javascript
node.js中的buffer.copy方法使用说明
Dec 14 Javascript
js实现仿京东2级菜单效果(带延时功能)
Aug 27 Javascript
javascript学习指南之回调问题
Apr 23 Javascript
js实现纯前端的图片预览
Apr 27 Javascript
node.js express中app.param的用法详解
Jul 16 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
Apr 13 Javascript
Vue 同步异步存值取值实现案例
Aug 05 Javascript
Jquery-data的三种用法
Apr 18 #jQuery
微信小程序实战之登录页面制作(5)
Mar 30 #Javascript
Angular2数据绑定详解
Apr 18 #Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
Jun 29 #Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 #Javascript
JavaScript实现前端实时搜索功能
Mar 26 #Javascript
用 js 的 selection range 操作选择区域内容和图片
Apr 18 #Javascript
You might like
DedeCms模板安装/制作概述
2007/03/11 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
php自定义分页类完整实例
2015/12/25 PHP
php解析base64数据生成图片的方法
2016/12/06 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
2013/12/27 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
2016/03/04 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
详解vue.js之props传递参数
2017/12/12 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
vue slot与传参实例代码讲解
2019/04/28 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
layui插件表单验证提交触发提交的例子
2019/09/09 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
python 判断自定义对象类型
2009/03/21 Python
Python中subprocess模块用法实例详解
2015/05/20 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
详解python while 函数及while和for的区别
2018/09/07 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
Python中将两个或多个list合成一个list的方法小结
2019/05/12 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
Stefania Mode美国:奢华设计师和时尚服装
2018/01/07 全球购物
介绍一下#error预处理
2015/09/25 面试题
公司证明怎么写
2014/09/22 职场文书
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
nginx+lua单机上万并发的实现
2021/05/31 Servers