微信小程序自定义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 相关文章推荐
EasyUI的treegrid组件动态加载数据问题的解决办法
Dec 11 Javascript
javascipt:filter过滤介绍及使用
Sep 10 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
Jquery ajax请求导出Excel表格的实现代码
Jun 08 Javascript
AngularJs表单校验功能实例代码
Feb 09 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
JSON生成Form表单的方法示例
Nov 21 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 Javascript
javascript实现贪吃蛇小游戏
Jul 28 Javascript
javascript自定义加载loading效果
Sep 15 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
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
js限制文本框为整数和货币的函数代码
2010/10/13 Javascript
鼠标经过tr时,改变tr当前背景颜色
2014/01/13 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
浅析jQuery Mobile的初始化事件
2015/12/03 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
vue初尝试--项目结构(推荐)
2018/01/30 Javascript
JS将网址url转化为JSON格式的方法
2018/07/02 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
Vue组件跨层级获取组件操作
2020/07/27 Javascript
python获取一组汉字拼音首字母的方法
2015/07/01 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
python组合无重复三位数的实例
2018/11/13 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
python实现电子产品商店
2019/02/26 Python
python字典排序的方法
2019/10/12 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
Python3自定义json逐层解析器代码
2020/05/11 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
Python 整行读取文本方法并去掉readlines换行\n操作
2020/09/03 Python
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
优纳科技软件测试面试题
2012/05/15 面试题
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
给幼儿园老师的表扬信
2014/01/19 职场文书
先进单位事迹材料
2014/12/25 职场文书