微信小程序自定义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 相关文章推荐
jQuery事件 delegate()使用方法介绍
Oct 30 Javascript
浅谈JavaScript Array对象
Dec 29 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
几种响应式文字详解
May 19 Javascript
JavaScript实现三级级联特效
Nov 05 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
May 01 Javascript
Elasticsearch实现复合查询高亮结果功能
Sep 10 Javascript
JS数组reduce()方法原理及使用技巧解析
Jul 14 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
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
关于页面优化和伪静态
2009/10/11 PHP
PHP类与对象中的private访问控制的疑问
2012/11/01 PHP
php常用图片处理类
2016/03/16 PHP
php发送http请求的常用方法分析
2016/11/08 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
Jquery动态添加及删除页面节点元素示例代码
2014/06/16 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
vue-cli 组件的导入与使用教程详解
2018/04/11 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
Python三级菜单的实例
2017/09/13 Python
解决python3 pika之连接断开的问题
2018/12/18 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
Python socket 套接字实现通信详解
2019/08/27 Python
python中return的返回和执行实例
2019/12/24 Python
Python PyQt5整理介绍
2020/04/01 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
2019/08/05 HTML / CSS
毕业生精彩的自我评价分享
2013/10/06 职场文书
保护环境建议书300字
2014/05/13 职场文书
教师节简报
2015/07/20 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android