小程序中如何自定义toast-创新互联-成都快上网建站

小程序中如何自定义toast-创新互联

这篇文章将为大家详细讲解有关小程序中如何自定义toast,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联公司于2013年开始,先为丰宁等服务建站,丰宁等地企业,进行企业商务咨询服务。为丰宁企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

一、微信官方默认toast

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

微信自带toast的效果:

小程序中如何自定义toast

js文件:

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

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

只能显示success、loading两种icon

且icon不可去除

持续时间较大10秒

二、自定义toast

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

先看效果:

小程序中如何自定义toast

看似简单,实现起来相当不简单,如何实现:

1)建立一个公共的toast的template模板文件,因为每个页面都需要用到toast



 
  
  
   
    {{title}}
   
  
 

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消失的时候有一个缓慢的动画效果。

关于“小程序中如何自定义toast”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


网页标题:小程序中如何自定义toast-创新互联
标题URL:http://kswjz.com/article/hjsjg.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流