Shulou(Shulou.com)05/31 Report--

This article introduces in detail "How to realize custom universal toast component for Mini programs," with detailed content, clear steps and proper details. I hope this article "How to realize custom universal toast component for Mini programs" can help you solve your doubts. Let's learn new knowledge together with the idea of small editor.

demand

Toast of Mini programs can only be displayed on pages, and cannot customize the position, font size, and addition of icon in a single text; therefore, a globally universal Toast can be customized.

effect preview

如何使用

代码目录位于 /widget/toast 下，包含3个文件

toast.js 脚本代码

toast.css 样式文件，可以根据自己需求定制

toast.swan 模板结构，可以根据自己需求定制

使用步骤一：

将/widget/toast的三个文件，放在与page同名的widget文件夹中，如果项目没有widget文件夹，就新建一个。

使用步骤二：

在项目的整个 app.js 中引入，一次引入，所有page均可以使用：

// app.jsimport { BdToast } from './widget/toast/toast.js';App({ BdToast, // 挂载 onLaunch(options) { // do something when launch }, onShow(options) { // do something when show }, onHide() { // do something when hide }});

使用步骤三：

在项目的app.css中引入 toast.css：

// app.css@import "./widget/toast/toast.css";

使用步骤四：

在需要的page页面，将模板引入：

// pages/index/index.swan

使用步骤五

在具体的页面进行初始化调用：

/ 初始化new app.BdToast();// 具体调用：Page({ data: {}, onLoad() { new app.BdToast(); }, clickShowToast(e) { switch (+e.target.dataset.id) { case 1: this.bdtoast.toast({ title: '仅显示标题' }); break; case 2: this.bdtoast.toast({ title: '设置图片+文字', iconSrc: '../../images/loading.gif' }); break; case 3: this.bdtoast.toast({ title: '设置时间', duration: 1000 }); break; case 4: this.bdtoast.toast({ title: '设置标题', subTitle: '副标题' }); break; } }});

参数说明：

参数类型必填说明titlestring是标题iconSrcstring否icon地址，提供icon的url，icon大小为32px * 32pxsubTitlestring否副标题，同时需要title存在才会显示，否则不显示副标题durationnumber否持续时间，不填默认1500毫秒successfunction否执行成功的回调failfunction否执行失败的回调completefunction否完成的回调，不管有没有执行成功读到这里，这篇"小程序怎么实现自定义通用toast组件"文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注行业资讯频道。

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.