微信小程序实战之自定义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 相关文章推荐
JS和JQ的event对象区别分析
Nov 24 Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
JavaScript作用域示例详解
Jul 07 Javascript
微信小程序 PHP后端form表单提交实例详解
Jan 12 Javascript
原生JS实现获取及修改CSS样式的方法
Sep 04 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 Javascript
JavaScript实现电灯开关小案例
Mar 30 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 Javascript
浅谈JavaScript作用域
Dec 06 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
Zend 输出产生XML解析错误
2009/03/03 PHP
标准PHP的AES加密算法类
2015/03/12 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
PHP读取目录树的实现方法分析
2019/03/22 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
IE6-8中Date不支持toISOString的修复方法
2014/05/04 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
jQuery实现仿百度帖吧头部固定导航效果
2015/08/07 Javascript
JS实现选项卡实例详解
2015/11/17 Javascript
JS与jQuery实现隔行变色的方法
2016/09/09 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
javascript实现留言板功能
2020/02/08 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
微信小程序个人中心的列表控件实现代码
2020/04/26 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
2020/12/30 Vue.js
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
Python3匿名函数用法示例
2018/07/25 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
Python通过Pillow实现图片对比
2020/04/29 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
高中自我鉴定范文
2013/11/03 职场文书
办理护照介绍信
2014/01/16 职场文书
挂科检讨书范文
2014/02/20 职场文书
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python
MySQL如何解决幻读问题
2021/08/07 MySQL