百度小程序自定义通用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 读取图片文件的大小
Jun 25 Javascript
JS代码同步文本框内容的实例方法
Jul 12 Javascript
jquery showModelDialog的使用方法示例详解
Nov 19 Javascript
Javascript 遍历页面text控件详解
Jan 06 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
javascript RegExp 使用说明
May 21 Javascript
jquery实现input框获取焦点的简单实例
Jan 26 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
May 21 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
Aug 28 Javascript
layer弹出层扩展主题的方法
Sep 11 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
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
2015/09/20 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
Laravel5.7 Eloquent ORM快速入门详解
2019/04/12 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
Javascript常考语句107条收集
2010/03/09 Javascript
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
vue自定义正在加载动画的例子
2019/11/14 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
Python中flatten( )函数及函数用法详解
2018/11/02 Python
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
Python collections模块使用方法详解
2019/08/28 Python
python matplotlib画盒图、子图解决坐标轴标签重叠的问题
2020/01/19 Python
python之语音识别speech模块
2020/09/09 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
请介绍一下Ant
2016/07/22 面试题
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
自我反省检讨书
2014/01/23 职场文书
志愿者活动总结报告
2014/06/27 职场文书
最美家庭活动方案
2014/08/31 职场文书
中学生自我评价范文
2015/03/03 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书
中国式结婚:司仪主持词(范文)
2019/07/25 职场文书
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
2021/12/06 Java/Android