百度小程序自定义通用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 相关文章推荐
ExtJs事件机制基本代码模型和流程解析
Oct 24 Javascript
JavaScript游戏之优化篇
Nov 08 Javascript
javascript中expression的用法整理
May 13 Javascript
js 获取当前web应用的上下文路径实现方法
Aug 19 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
zTree异步加载展开第一级节点的实现方法
Sep 05 Javascript
json字符串传到前台input的方法
Aug 06 Javascript
记录一篇关于redux-saga的基本使用过程
Aug 18 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 Javascript
使用JS判断页面是首次被加载还是刷新
May 26 Javascript
React中使用外部样式的3种方式(小结)
May 28 Javascript
vue.js 2.0实现简单分页效果
Jul 29 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加密解密函数分享
2014/06/05 PHP
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
Javascript开发包大全整理
2006/12/22 Javascript
jquery中实现标签切换效果的代码
2011/03/01 Javascript
jQuery ajax 路由和过滤器使用说明
2011/08/02 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
2018/02/03 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
2020/03/25 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
[11:33]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第二场
2018/04/06 DOTA
收集的几个Python小技巧分享
2014/11/22 Python
python实现挑选出来100以内的质数
2015/03/24 Python
详解Swift中属性的声明与作用
2016/06/30 Python
Python实现在线音乐播放器
2017/03/03 Python
Python机器学习算法之k均值聚类(k-means)
2018/02/23 Python
通过PYTHON来实现图像分割详解
2019/06/26 Python
Django外键(ForeignKey)操作以及related_name的作用详解
2019/07/29 Python
Python3和pyqt5实现控件数据动态显示方式
2019/12/13 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
麦德龙官方海外旗舰店:德国麦德龙超市
2017/12/23 全球购物
顶岗实习接收函
2014/01/09 职场文书
三八节主持词
2014/03/17 职场文书
理想点亮人生演讲稿
2014/05/21 职场文书
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS
MySQL 逻辑备份与恢复测试的相关总结
2021/05/14 MySQL
实例详解Python的进程,线程和协程
2022/03/13 Python