千家信息网

微信小程序怎么实现自定义Toast弹框

发表于:2024-11-19 作者:千家信息网编辑
千家信息网最后更新 2024年11月19日,这篇文章主要介绍了微信小程序怎么实现自定义Toast弹框的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序怎么实现自定义Toast弹框文章都会有所收获,下面我们一起
千家信息网最后更新 2024年11月19日微信小程序怎么实现自定义Toast弹框

这篇文章主要介绍了微信小程序怎么实现自定义Toast弹框的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序怎么实现自定义Toast弹框文章都会有所收获,下面我们一起来看看吧。

先来看一下效果图:

怎么用呢,我们来看一下:

WeTaost插件源码位于src目录下,包含3个文件。

  • wetoast.js: 脚本代码

  • wetoast.wxml: 模板结构

  • wetoast.wxss: 样式

使用时只需要加入以上3个文件即可

第一步:在项目的app.js中引入wetoast.js,并注册到小程序上,小程序所有Page页面均可使用

//app.jslet {WeToast} = require('src/wetoast.js')//注册小程序,接收一个Object参数App({ WeToast})

第二步:在项目的app.wxss中引入wetoast.wxss

@import "src/wetoast.wxss";

至于里面的样式,弹框大小,可自行修改。

第三步:引入WeToast模板