微信小程序之自定义toast实例 —— 微信小程序实战系列(6)
来源:互联网 发布:去马赛克的软件 编辑:程序博客网 时间:2024/05/23 19:02
版权声明:本文为博主原创文章,转载务必注明出处,http://blog.csdn.net/michael_ouyang。
微信提供了一个toast的api wx.showToast()
相关连接:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html#wxshowtoastobject
本来是比较好的,方便使用,但是这个toast会显示出图标,而且不能去除。
假设:我们执行完业务的时候,toast一下,当执行成功的时候,效果还可以接受,如下图:
但是,当执行失败的时候,如下图:
失败了,你还显示个扣扣图案,那到底是成功还是失败??这肯定是不能接受的。【捂脸】
若是给老板看到这种效果,又是一顿臭骂,程序猿的委屈
下面介绍一个自定义的toast
效果:
具体实现:
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(); } })
更多小程序的教程
微信开发者工具的快捷键
微信小程序的文件结构 —— 微信小程序教程系列(1)
微信小程序的生命周期实例演示 —— 微信小程序教程系列(2)
微信小程序的动态修改视图层的数据 —— 微信小程序教程系列(3)
微信小程序的新建页面 —— 微信小程序教程系列(4)
微信小程序的如何使用全局属性 —— 微信小程序教程系列(5)
微信小程序的页面跳转 —— 微信小程序教程系列(6)
微信小程序标题栏和导航栏的设置 —— 微信小程序教程系列(7)
微信小程序的作用域和模块化 —— 微信小程序教程系列(8)
微信小程序视图层的数据绑定 —— 微信小程序教程系列(9)
微信小程序视图层的条件渲染 —— 微信小程序教程系列(10)
微信小程序视图层的列表渲染 —— 微信小程序教程系列(11)
微信小程序视图层的模板 —— 微信小程序教程系列(12)
微信小程序wxss的尺寸单位rpx —— 微信小程序教程系列(13)
微信小程序的网络请求 —— 微信小程序教程系列(14)
微信小程序的百度地图获取地理位置 —— 微信小程序教程系列(15)
微信小程序使用百度api获取天气信息 —— 微信小程序教程系列(16)
微信小程序获取系统日期和时间 —— 微信小程序教程系列(17)
微信小程序之顶部导航栏实例 —— 微信小程序实战系列(1)
微信小程序之上拉加载(分页加载)实例 —— 微信小程序实战系列(2)
微信小程序之轮播图实例 —— 微信小程序实战系列(3)
微信小程序之仿android fragment之可滑动的底部导航栏实例 —— 微信小程序实战系列(4)
微信小程序之登录页实例 —— 微信小程序实战系列(5)
更多小程序的教程请查看:http://blog.csdn.net/michael_ouyang/article/details/54700871
谢谢观看,不足之处,敬请指导
- 微信小程序之自定义toast实例 —— 微信小程序实战系列(6)
- 微信小程序之自定义toast实例 —— 微信小程序实战系列(6)
- 微信小程序之自定义轮播图实例 —— 微信小程序实战系列(3)
- 微信小程序之自定义抽屉菜单(从下拉出)实例 —— 微信小程序实战系列(7)
- 微信小程序之自定义模态弹窗(带动画)实例 —— 微信小程序实战系列(8)
- 微信小程序之登录页实例 —— 微信小程序实战系列(5)
- 微信小程序之自定义Toast
- 微信小程序自定义Toast
- 微信小程序 自定义Toast
- 微信小程序之顶部导航栏(选项卡)实例 —— 微信小程序实战系列(1)
- 微信小程序之顶部导航栏(选项卡)实例 —— 微信小程序实战系列(1)
- 微信小程序之『自定义toast』
- 微信小程序之『自定义toast』
- 微信小程序之『自定义toast』
- 微信小程序之自定义toast弹窗
- 微信小程序之仿android fragment之可滑动的底部导航栏实例 —— 微信小程序实战系列(4)
- 微信小程序之侧栏分类 —— 微信小程序实战商城系列(1)
- 微信小程序之仿淘宝分类入口 —— 微信小程序实战商城系列(2)
- 结构化数据上的机器学习大杀器XGBoost
- 百练 8462:大盗阿福
- c++容易混淆的概念
- 英语发音困难点记录
- nginx安装lua和echo模块
- 微信小程序之自定义toast实例 —— 微信小程序实战系列(6)
- java作业调度框架Quartz
- aop编程
- mysql之拷贝表
- 二叉树面试题:判断树是否为完全二叉树和求二叉树的镜像
- H
- HDU 3183 A Magic Lamp (RMQ)
- 集合类
- 使用MyBatis Generator自动创建代码