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


Posted in Javascript onJuly 17, 2019

需求

手百小程序的toast仅支持在页中展示,不能自定义位置、字体大小、在单个文本中增加icon等需求;因此自定义一个全局可通用的Toast。

效果预览

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

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

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

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

如何使用

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

  • toast.js 脚本代码
  • toast.css 样式文件,可以根据自己需求定制
  • toast.swan 模板结构,可以根据自己需求定制

使用步骤一:

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

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

使用步骤二:

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

// app.js
import { 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
<!-- toast使用 -->
<import src="/widget/toast/toast.swan"/>
<template is="bdtoast" data="{{bdtoast}}"/>

 

使用步骤五

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

/ 初始化
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;
  }
 }
});

参数说明:

参数 类型 必填 说明
title string 标题
iconSrc string icon地址,提供icon的url,icon大小为32px * 32px
subTitle string 副标题,同时需要title存在才会显示,否则不显示副标题
duration number 持续时间,不填默认1500毫秒
success function 执行成功的回调
fail function 执行失败的回调
complete function 完成的回调,不管有没有执行成功

最后说明

例子Demo中也有关于toast的点击tap事件的绑定,因为此功能不是很常用,有兴趣的可以clone下来自行研究。另外,如果有样式结构或者样式不符合需求的话,可以自己在 widget/toast的源码中进行更新,直到符合自己的需求~

欢迎star、issue和pull request~

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype使用指南之array.js
Jan 10 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
May 19 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 Javascript
详解javascript传统方法实现异步校验
Jan 22 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
Dec 26 Javascript
JS生成一维码(条形码)功能示例
Jan 19 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
Vue 按键修饰符处理事件的方法
May 04 Javascript
深入剖析Node.js cluster模块
May 23 Javascript
JavaScript 下载svg图片为png格式
Jun 21 Javascript
微信小程序实现自定义加载图标功能
Jul 19 Javascript
node事件循环和process模块实例分析
Feb 14 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
Jul 16 #Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 #Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 #Javascript
微信小程序-API接口安全详解
Jul 16 #Javascript
jquery实现垂直无限轮播的方法分析
Jul 16 #jQuery
JavaScript解析JSON数据示例
Jul 16 #Javascript
微信小程序 Storage更新详解
Jul 16 #Javascript
You might like
Mysql的常用命令
2006/10/09 PHP
WordPress中调试缩略图的相关PHP函数使用解析
2016/01/07 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
php微信公众号开发之校园图书馆
2018/10/20 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
jQuery的deferred对象使用详解
2016/09/25 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
webpack项目轻松混用css module的方法
2018/06/12 Javascript
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
vue中使用vue-pdf的方法详解
2020/09/05 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
Python中用于去除空格的三个函数的使用小结
2015/04/07 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
长安大学毕业生自我鉴定
2014/01/17 职场文书
企业道德讲堂实施方案
2014/03/19 职场文书
学雷锋宣传标语
2014/06/25 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
小学教师党员承诺书
2015/04/27 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
庆祝教师节主持词
2015/07/06 职场文书
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python