百度小程序自定义通用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 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 Javascript
JS经典正则表达式笔试题汇总
Dec 15 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
vue配置多页面的实现方法
May 22 Javascript
Vue 配合eiement动态路由,权限验证的方法
Sep 26 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
Nov 06 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
Feb 28 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 Javascript
详解Vue的sync修饰符
May 15 Vue.js
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
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
常用表单验证类,有了这个,一般的验证就都齐了。
2006/12/06 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
PHP函数超时处理方法
2016/02/14 PHP
JavaScript的目的分析
2007/01/05 Javascript
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
javascript中的一些注意事项 更新中
2010/12/06 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
jquery ajax属性async(同步异步)示例
2013/11/05 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python 不关闭控制台的实现方法
2011/10/23 Python
Python中的descriptor描述器简明使用指南
2016/06/02 Python
Python 3.7新功能之dataclass装饰器详解
2018/04/21 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
加拿大时装零售商:Influence U
2018/12/22 全球购物
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
数据库什么时候应该被重组
2012/11/02 面试题
应届生高等护理求职信
2013/10/12 职场文书
导游的职业规划书范文
2013/12/27 职场文书
副校长竞聘演讲稿
2014/09/01 职场文书
二婚主持词
2015/06/30 职场文书
SpringBoot中HttpSessionListener的简单使用方式
2022/03/17 Java/Android