百度小程序自定义通用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 相关文章推荐
javascript SocialHistory 检查访问者是否访问过某站点
Aug 02 Javascript
编写高性能的JavaScript 脚本的加载与执行
Apr 19 Javascript
JS实现随机化快速排序的实例代码
Aug 01 Javascript
JavaScript四种调用模式和this示例介绍
Jan 02 Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 Javascript
超棒的响应式布局jQuery插件Freetile.js
Nov 17 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 Javascript
JS实现动态星空背景效果
Nov 01 Javascript
如何用Node.js编写内存效率高的应用程序
Apr 30 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
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
Codeigniter控制器controller继承问题实例分析
2016/01/19 PHP
php curl中gzip的压缩性能测试实例分析
2016/11/08 PHP
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
2007/01/09 Javascript
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
2009/10/29 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
javascript数组操作总结和属性、方法介绍
2014/04/05 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
理解Javascript图片预加载
2016/02/23 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
jquery实现手机端单店铺购物车结算删除功能
2017/02/22 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
vue实现数字滚动效果
2020/06/29 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
python中 logging的使用详解
2017/10/25 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
中国最大的团购网站:聚划算
2016/09/21 全球购物
俄罗斯香水和化妆品在线商店:Aroma-butik
2020/02/28 全球购物
致800米运动员广播稿(10篇)
2014/10/17 职场文书
2014年收银工作总结
2014/11/13 职场文书
中学后勤工作总结2015
2015/07/22 职场文书
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫