百度小程序自定义通用吐司组件

需求

手工小程序的Toast只支持在页面上显示，不能在单个文本中自定义位置、字体大小、添加图标；因此，定制一个可以全局使用的吐司。

效果预览

如何使用

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

Toast.js脚本代码toast.css样式文件，可以根据自己的需要自定义toast.swan模板的结构，也可以根据自己的需要自定义Step 1的使用：

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

使用第二步：

在项目的整个app.js中引入，一旦引入，所有页面都可以使用：

//app.jsimport { BdToast } from '。/widget/toast/toast . js '；App({ BdToast，//启动时挂载(选项){//启动时做点什么}、显示时显示(选项){//显示时做点什么}、隐藏时隐藏(){//隐藏时做点什么} })；使用第三步：

将toast.css引入到项目的app.css中：

//app.css@import '。/widget/toast/toast . CSS '；使用第四步：

在所需页面上，将模板引入：

//page/index/index . swan！- toast使用-import src=' http :/widget/toast/toast . swan '/template is=' BD toast ' data=' { { BD toast } } '/

使用第五步

在特定页面上进行初始化调用：

/初始化新应用程序。BdToast()；//具体调用：page({ data : } }，onload(){ newapp . bdtoast()；}，单击show toast(e){ switch(e . target . dataset . id){ case 1: this . BD toast . toast({ title : '仅显示标题' })；打破；case 2: this . BD toast . toast({ title : '设置图片文本，icon src : '././images/loading . gif ' })；打破；case : this . BD toast . toast({ title : ' set time '，duration : 1000 })；打破；case 4: this . BD toast . toast({ title : ' set title '，subtitle : ' subtitle ' })；打破；} }});参数描述：

参数类型所需描述标题字符串为title iconSrc字符串无图标地址，提供图标的url，图标的大小为32px * 32px subTitle字符串无字幕，只有title存在才会显示。否则，不显示字幕时长数字“无时长”，默认1500 ms成功函数“无成功回调失败函数”“无失败回调完成函数”“无完成回调”，无论最终描述是否成功。

示例演示中也有关于toast的tap Click事件的绑定，因为这个功能不是很常用，感兴趣的可以克隆出来自己研究。另外，如果样式结构或者样式不符合要求，可以在widget/toast的源代码中更新，直到符合自己的需求~

欢迎来星，发布和拉请求~

百度小程序自定义通用组件-github地址

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。