百度小程序自定义通用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 相关文章推荐
js的event详解。
Sep 06 Javascript
xmlHTTP实例
Oct 24 Javascript
extjs fckeditor集成代码
May 10 Javascript
javascript面向对象之this关键词用法分析
Jan 13 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
Mar 04 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
JavaScript接口的实现三种方式(推荐)
Jun 14 Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
Mar 02 Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 Javascript
Node批量爬取头条视频并保存方法
Sep 20 Javascript
深入浅析javascript函数中with
Oct 28 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
Content-type 的说明
2006/10/09 PHP
开源SNS系统-ThinkSNS
2008/05/18 PHP
php 冒泡排序 交换排序法
2011/05/10 PHP
php 搜索框提示(自动完成)实例代码
2012/02/05 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
Firebug 字幕文件JSON地址获取代码
2009/10/28 Javascript
在HTML代码中使用JavaScript代码的例子
2014/10/16 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
node.js实现登录注册页面
2017/04/08 Javascript
vue购物车插件编写代码
2017/11/27 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
2019/04/14 Javascript
基于nodejs的微信JS-SDK简单应用实现
2019/05/21 NodeJs
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
[51:10]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python开发WebService系列教程之REST,web.py,eurasia,Django
2014/06/30 Python
Python中转换角度为弧度的radians()方法
2015/05/18 Python
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
python 字典 setdefault()和get()方法比较详解
2019/08/07 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
HTML5应用之文件上传
2016/12/30 HTML / CSS
保时捷设计:Porsche Design
2019/03/30 全球购物
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
UNIX命令速查表
2012/03/10 面试题
实习生自荐信范文分享
2013/11/27 职场文书
校长先进事迹材料
2014/02/01 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
青年文明号创建口号大全
2015/12/25 职场文书
python 单机五子棋对战游戏
2022/04/28 Python