微信小程序自定义toast实现方法详解【附demo源码下载】


Posted in Javascript onNovember 28, 2017

本文实例讲述了微信小程序自定义toast实现方法。分享给大家供大家参考,具体如下:

一、微信官方默认toast

toast最常见了,几乎每个App都有这样的特效,先看下小程序自带的toast效果,立马想死的心都有了~~

微信自带toast的效果:

微信小程序自定义toast实现方法详解【附demo源码下载】

js文件:

wx.showToast({
 title: '成功',
 icon: 'success',
 duration: 2000
})

用法超级简单,但官方小程序有几个问题:

只能显示success、loading两种icon

且icon不可去除

持续时间最大10秒

二、自定义toast

我们最常见的toast是偏底部,而且高度是比较小的那种~~

先看效果:

微信小程序自定义toast实现方法详解【附demo源码下载】

看似简单,实现起来相当不简单,如何实现:

1)建立一个公共的toast的template模板文件,因为每个页面都需要用到toast

<!-- wetoast.wxml -->
<template name="wetoast">
 <view class="wetoast {{reveal ? 'wetoast_show' : ''}}">
  <view class="wetoast__mask"></view>
  <view class="wetoast__bd {{position}}" animation="{{animationData}}">
   <block wx:if="{{title}}">
    <view class="wetoast__bd__title {{titleClassName || ''}}">{{title}}</view>
   </block>
  </view>
 </view>
</template>

2)JS主要有以下用法

核心代码:

let pages = getCurrentPages();
let curPage = pages[pages.length - 1];

这段代码是核心,getCurrentPages().length - 1 表示可以获得当前页面的page,只有获得了page,才能通过page.setData把当前页面的数据绑定到toast上面。

核心代码:

let animation = wx.createAnimation();
animation.opacity(1).step();

这段代码是toast消失的时候有一个缓慢的动画效果。

附:完整demo实例代码点击此处本站下载

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
window.showModalDialog使用手册
Jan 11 Javascript
JavaScript 字符串连接性能优化
Dec 20 Javascript
javascript中的变量是传值还是传址的?
Apr 19 Javascript
菜鸟javascript基础整理1
Dec 06 Javascript
js 函数调用模式小结
Dec 26 Javascript
JavaScript中常用的运算符小结
Jan 18 Javascript
jQuery中获取Radio元素值的方法
Jul 02 Javascript
jQuery+Ajax实现无刷新分页
Oct 30 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 Javascript
解决Vue不能检测数组或对象变动的问题
Feb 24 Javascript
js中的闭包实例展示
Nov 01 Javascript
vue2.0与bootstrap3实现列表分页效果
Nov 28 #Javascript
Vue.JS项目中5个经典Vuex插件
Nov 28 #Javascript
Vue实现web分页组件详解
Nov 28 #Javascript
基于vue2实现左滑删除功能
Nov 28 #Javascript
JavaScript生成简单等差数列
Nov 28 #Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 #Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
Nov 28 #Javascript
You might like
php intval的测试代码发现问题
2008/07/27 PHP
jQuery+php实现ajax文件即时上传的详解
2013/06/17 PHP
php使用json_encode对变量json编码
2014/04/07 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
详解php协程知识点
2018/09/21 PHP
Javascript条件判断使用小技巧总结
2008/09/08 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
PHP配置文件php.ini中打开错误报告的设置方法
2015/01/09 PHP
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
2016/05/31 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
jQuery+koa2实现简单的Ajax请求的示例
2018/03/06 jQuery
echarts浮动显示单位的实现方法示例
2020/12/04 Javascript
[06:53]2018DOTA2国际邀请赛寻真——为复仇而来的Newbee
2018/08/15 DOTA
Python装饰器基础详解
2016/03/09 Python
Python 实现一个颜色色值转换的小工具
2016/12/06 Python
Python切片工具pillow用法示例
2018/03/30 Python
5分钟 Pipenv 上手指南
2018/12/20 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
python TCP包注入方式
2020/05/05 Python
PyCharm最新激活码(2020/10/27全网最新)
2020/10/27 Python
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
世界汽车零件:World Car Parts
2019/09/04 全球购物
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
数据管理员的自我评价分享
2013/11/15 职场文书
捐款倡议书范文
2014/02/02 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
教师年度考核自我评鉴
2015/08/11 职场文书
详解PHP设计模式之依赖注入模式
2021/05/25 PHP
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫
Golang日志包的使用
2022/04/20 Golang