百度小程序自定义通用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 Element学习笔记(篇一)
Oct 26 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
Jan 23 Javascript
javascript:;与javascript:void(0)使用介绍
Jun 05 Javascript
jquery拖动插件(jquery.drag)使用介绍
Jun 18 Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
JSON无限折叠菜单编写实例
Dec 16 Javascript
嵌入式iframe子页面与父页面js通信的方法
Jan 20 Javascript
详解Vue方法与事件
Mar 09 Javascript
jquery对table做排序操作的实例演示
Aug 10 jQuery
vue增加强缓存和版本号的实现方法
May 01 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
Apr 21 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
Oct 24 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
我的论坛源代码(二)
2006/10/09 PHP
用PHP函数解决SQL injection
2006/12/09 PHP
实用函数9
2007/11/08 PHP
php SQL防注入代码集合
2008/04/25 PHP
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
CI框架中cookie的操作方法分析
2014/12/12 PHP
php生成唯一的订单函数分享
2015/02/02 PHP
PHP children()函数讲解
2019/02/03 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
javascript Demo模态窗口
2009/12/06 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
JavaScript手机振动API
2016/06/11 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
Vue引入Stylus知识点总结
2020/01/16 Javascript
python 获取list特定元素下标的实例讲解
2018/04/09 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
python中csv文件的若干读写方法小结
2018/07/04 Python
Python 字符串转换为整形和浮点类型的方法
2018/07/17 Python
对Python中TKinter模块中的Label组件实例详解
2019/06/14 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
jupyter notebook 重装教程
2020/04/16 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
生日宴会答谢词
2014/01/09 职场文书
党员承诺书内容
2014/03/26 职场文书
项目合作协议书
2014/04/16 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
Python标准库pathlib操作目录和文件
2021/11/20 Python
欧元符号 €
2022/02/17 杂记
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL
python 判断文件或文件夹是否存在
2022/03/18 Python
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server