微信小程序自定义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 相关文章推荐
大家未必知道的Js技巧收藏
Apr 07 Javascript
两种简单实现菜单高亮显示的JS类代码
Jun 27 Javascript
jquery 操作DOM案例代码分享
Apr 05 Javascript
JQuery动画和停止动画实例代码
Mar 01 Javascript
js实现的后台左侧管理菜单代码
Sep 11 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
Js获取图片原始宽高的实现代码
May 17 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
JavaScript中将值转换为字符串的五种方法总结
Jun 06 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
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
提升PHP性能的21种方法介绍
2013/06/25 PHP
Ubuntu下安装PHP的mongodb扩展操作命令
2015/07/04 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
js自动闭合html标签(自动补全html标记)
2012/10/04 Javascript
jquery如何根据值设置默认的选中项
2014/03/17 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
js实现文字滚动效果
2016/03/03 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
原生JavaScript写出Tabs标签页的实例代码
2020/07/20 Javascript
HTML元素拖拽功能实现的完整实例
2020/12/04 Javascript
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
Python入门教程之运算符与控制流
2016/08/17 Python
python下载微信公众号相关文章
2019/02/26 Python
Python替换月份为英文缩写的实现方法
2019/07/15 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
巴西独家产品和现场演示购物网站:Shoptime
2019/07/11 全球购物
关于Assembly命名空间的三个面试题
2015/07/23 面试题
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
关于赌博的检讨书
2014/01/24 职场文书
明星员工获奖感言
2014/08/14 职场文书
办公用房租赁协议书
2014/11/29 职场文书
军训新闻稿范文
2015/07/17 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
比较几种Redis集群方案
2021/06/21 Redis
vue ref如何获取子组件属性值
2022/03/31 Vue.js
Python学习之迭代器详解
2022/04/01 Python