当前位置：首页 > 资讯 > 技术文档

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

时间：2022-05-15 13:51 编辑：来源：阅读：
扫一扫，手机访问

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

本文实例讲述了微信小程序自定义toast实现方法。分享给大家供大家参考，具体如下： [b]一、微信官方默认toast[/b] toast最常见了，几乎每个App都有这样的特效，先看下小程序自带的toast效果，立马想死的心都有了~~ 微信自带toast的效果： [img]http://files.jb51.net/file_images/article/201711/20171128112803738.gif?20171028112854[/img] js文件：

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

用法超级简单，但官方小程序有几个问题：只能显示success、loading两种icon 且icon不可去除持续时间最大10秒 [b]二、自定义toast[/b] 我们最常见的toast是偏底部，而且高度是比较小的那种~~ 先看效果： [img]http://files.jb51.net/file_images/article/201711/20171128113452327.gif?20171028113534[/img] 看似简单，实现起来相当不简单，如何实现： 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];

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

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

这段代码是toast消失的时候有一个缓慢的动画效果。 [b]附：[/b]完整demo实例代码点击此处[url=http://xiazai.jb51.net/201711/yuanma/xiaoxiaoxiao-master(jb51.net).rar][b]本站下载[/b][/url]。希望本文所述对大家微信小程序开发有所帮助。

全部评论(0)

上一篇：新闻内页-JS分页
下一篇：微信小程序登陆流程详细介绍

资讯排行榜
更多>>