百度小程序自定义通用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 覆盖和重载 函数
Sep 25 Javascript
js删除所有的cookie的代码
Nov 25 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
Nov 18 Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 Javascript
js实现楼层效果的简单实例
Jul 15 Javascript
JS读写CSS样式的方法汇总
Aug 16 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
基于BootStrap实现简洁注册界面
Jul 20 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
详解使用create-react-app快速构建React开发环境
May 16 Javascript
vue-router 起步步骤详解
Mar 26 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
php 数组的一个悲剧?
2011/05/11 PHP
php中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
php不允许用户提交空表单(php空值判断)
2013/11/12 PHP
PHP中使用memcache存储session的三种配置方法
2014/04/05 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
关于laravel5.5的定时任务详解(demo)
2019/10/23 PHP
Js 本页面传值实现代码
2009/05/17 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
2010/10/20 Javascript
JS构建页面的DOM节点结构的实现代码
2011/12/09 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
举例简介AngularJS的内部语言环境
2015/06/17 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
vue实现图片上传功能
2020/05/28 Javascript
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
python中for循环把字符串或者字典添加到列表的方法
2019/07/20 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
python 两个数据库postgresql对比
2019/10/21 Python
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
Nike台湾官方商店:Nike.com (TW)
2017/08/16 全球购物
英国领先的电动可调床制造商:Laybrook
2019/12/26 全球购物
英国领先的在线鱼贩:The Fish Society
2020/08/12 全球购物
宿舍卫生检讨书
2014/01/16 职场文书
大班开学家长寄语
2014/04/04 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
Redis 哨兵集群的实现
2021/06/18 Redis
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python