脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序自定义toast

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

 更新时间：2017年11月28日 11:19:59   作者：大灰狼的小绵羊哥哥  
这篇文章主要介绍了微信小程序自定义toast实现方法,简单描述了微信小程序自带toast使用方法,并结合实例形式分析了自定义toast的定义与使用方法,需要的朋友可以参考下

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

一、微信官方默认toast

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

微信自带toast的效果：

js文件：

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

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

只能显示success、loading两种icon

且icon不可去除

持续时间最大10秒

二、自定义toast

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

先看效果：

看似简单，实现起来相当不简单，如何实现：

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实例代码点击此处本站下载。

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

您可能感兴趣的文章:

相关文章

  • 禁止IE用右键的JS代码

    禁止IE用右键的JS代码

    这篇文章主要介绍了禁止IE用右键的JS代码，有需要的朋友可以参考一下
    2013-12-12
  • 使用Web Component实现防篡改水印

    使用Web Component实现防篡改水印

    Web Component内部有钩子天然支持被篡改时被触发,用来防篡改非常方便,所以本文就将使用Web Component实现防篡改水印,感兴趣的小伙伴可以了解下
    2023-12-12
  • 多浏览器兼容的动态加载 JavaScript 与 CSS

    多浏览器兼容的动态加载 JavaScript 与 CSS

    Omar AL Zabir这位MVP总是喜欢搞些稀奇古怪同时又很实用的小东西，并且还十分值得参考。最近他就做了一个叫做ensure的小工具用于动态加载JavaScript、CSS与HTML，而且IE、Firefox、Opera、Safari都支持了，那么我们就来看看ensure是如何做到动态加载JavaScript与CSS的。
    2008-09-09
  • Bootstrap输入框组件使用详解

    Bootstrap输入框组件使用详解

    这篇文章主要为大家详细介绍了Bootstrap输入框组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】

    CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】

    这篇文章主要介绍了CKEditor 4.4.1 添加代码高亮显示插件功能,涉及ckeditor使用官方推荐Code Snippet插件的相关操作布局与使用注意事项,需要的朋友可以参考下
    2019-06-06
  • 浅谈JavaScript中promise的使用

    浅谈JavaScript中promise的使用

    本文主要对JavaScript中promise的使用进行详细介绍。具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • js实现左右两侧浮动广告

    js实现左右两侧浮动广告

    这篇文章主要为大家详细介绍了js实现左右两侧浮动广告，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-07-07
  • ES6中字符串的使用方法扩展

    ES6中字符串的使用方法扩展

    这篇文章主要给大家介绍了关于ES6中字符串的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用ES6具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-06-06
  • JavaScript如何输出杨辉三角

    JavaScript如何输出杨辉三角

    这篇文章主要介绍了JavaScript如何输出杨辉三角问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-01-01
  • javascript常用的方法整理

    javascript常用的方法整理

    JAVASCRIPT是AJAX技术中不可或缺的一部分，所以想学好AJAX以及现在流行的AJAX框架，学好JAVASCRIPT是最重要的。这章我给大家整理了一些JAVASCRIPT的基础知识、常用代码和事件汇总。
    2015-08-08

最新评论