百度小程序自定义通用toast组件
百度小程序Toast组件
author: @TiffanysBear
百度小程序自定义通用toast组件
需求
手百小程序的toast仅支持在页中展示,不能自定义位置、字体大小、在单个文本中增加icon等需求;因此自定义一个全局可通用的Toast。
效果预览
如何使用
代码目录位于 /widget/toast
下,包含3个文件
- toast.js 脚本代码
- toast.css 样式文件,可以根据自己需求定制
- toast.swan 模板结构,可以根据自己需求定制
使用步骤一:
将/widget/toast的三个文件,放在与page同名的widget文件夹中,如果项目没有widget文件夹,就新建一个。
使用步骤二:
在项目的整个 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~
百度小程序自定义通用toast组件的更多相关文章
- 微信小程序自定义导航栏组件,完美适配所有手机,可实现各种功能和情况
背景 在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS 手机对于页面 title 的展示不一致,安卓 title 的显示不居中 页面的 title 只支持纯文本级别的样式控 ...
- 微信小程序自定义导航栏组件
1.首先,要在json文件中设置为自定义的形式 "navigationStyle": "custom" 2.计算相关值 导航栏分为状态栏和标题栏,只要能算出每台 ...
- 微信小程序 - 自定义tabbar(组件)
配置项(关于使用组件) index.wxml <!-- tabBar:tabBar配置 activeIndex: 激活页面下标 slots: 多插槽配置(需与页面一致) --> <t ...
- 百度智能小程序弹窗组件wcPop|智能小程序自定义model弹窗模板
百度智能小程序自定义弹窗组件wcPop|百度小程序model对话框|智能小程序弹窗界面模板 最近百度也推出了自己的智能小程序,如是就赶紧去试了下,官方提供的api还不是狠完整.而且官方提供的弹窗组件也 ...
- 微信小程序 自定义导航组件 nav头部 全面屏设计
nav-dynamic 微信小程序自定义nav头部组件:适配全面屏设计: 实现功能 初始进入页面时,展示初始状态下的nav样式: 页面滚动时,监听页面滚动事件,展示滚动状态下的nav样式: 根据配置字 ...
- 微信小程序自定义组件实现
官方从 1.6.3 开始对于自定义组件这一块有了比较大的变动,首先比较明显的感觉就是文档比以前全多了,有木有!,现在小程序支持简洁的组件化编程,可以将页面内的功能模块抽象成自定义组件,以便在不同的页面 ...
- 微信小程序自定义音频组件,自定义滚动条,单曲循环,循环播放
小程序自定义音频组件,带滚动条 摘要:首先自定义音频组件,是因为产品有这样的需求,需要如下样式的 而微信小程序API给我们提供的就是这样的 而且产品需要小程序有后台播放功能,所以我们不考虑小程序的 a ...
- 微信小程序自定义组件,提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加“components”目录,然后像添加Page页面一样添加自定义组 ...
- 百度小程序-map组件定位
给客户开发一个百度小程序,有个地图定位显示.百度小程序内置的api地图是不准的,通过百度一下,查询到坐标偏移算法公式,自己项目中使用,手机测试坐标已经正常显示! 经纬度,通过百度坐标拾取器拾取到! . ...
随机推荐
- JavaScript生成树形菜单(递归算法)
1.最终效果图(这里仅为实现算法,并加载至页面,不做任何css界面优化) 注释:本示例包含三级目录菜单,但实际上可支持N级(可使用该代码自行测试) 2.数据源 菜单信息一般来源于数据库中数据表,且为自 ...
- Unicode对象
什么是Unicode对象呢? 你可以认为unicode对象就是一个Python字符串,它可以处理上百万不同类别的字符——从古老版本的Latin字符到非Latin字符,再到曲折的引用和艰涩的符号. 普通 ...
- Android零基础入门第35节:Android中基于回调的事件处理
原文:Android零基础入门第35节:Android中基于回调的事件处理 通过前面两期掌握了Android中基于监听的事件处理的五种形式,那么本期一起来学习Android中基于回调的事件处理. 一. ...
- Android Java调用Qt写的so库
有时候,我们反编译apk得到一个so库,如果直接使用这个so库的话,必须使用原来so库同样的package名字,才能用.这样人家反编译你的apk,就知道你侵犯了人家的版权.为了达到混淆的目的,我们可以 ...
- 用python的curl和lxml来抓取和分析网页内容
Curl是一个强大的URL语法的客户端,支持DICT, FILE, FTP, FTPS, Gopher, HTTP, HTTPS, IMAP, IMAPS, LDAP, LDAPS, POP3, PO ...
- 手机控制PPT good
以前做了一个小东西,通过手机来控制PPT的翻页,最大化和最小化,东西很简单,近期整理电脑发现了拿来和大家分享一下 主要分为两个部分,客户端和服务器 客户端实现 当初考虑到跨平台的特性就选择了qt来写的 ...
- C++中代理类和句柄类
指针是 C 与其他语言区别的重要特征之一,在 C++ 中,指针也被广泛运用,我们通过指针实现多态.然而,众所周知,指针的使用必须小心,否则很容易造成内存泄漏 Memory Leak.当我们有几个指针指 ...
- Qt在Windows下如何创建无CMD窗口控制台程序
默认情况下,用Qt新建一个控制台程序,运行时会弹出CMD窗口.如何把窗口去掉呢? *.pro文件默认是这样的: TEMPLATE = app CONFIG += console CONFIG -= a ...
- Mac OS下terminal的快捷键
时隔2年又开始使用Mac OS系统,之前的很多快捷键和常用的命令都忘记了,使用起来确实不方便,效率也低,特别是terminal下,所以对于terminal又找了一下并整理如下,希望对后来的同学也有用: ...
- 解决SpringBoot多模块发布时99%的问题?SpringBoot发布的8个原则和4个问题的解决方案
如果使用 SpringBoot 多模块发布到外部 Tomcat,可能会遇到各种各样的问题.本文归纳了以下 8 个原则和发布时经常出现的 4 个问题的解决方案,掌握了这些原则和解决方案,几乎可以解决绝大 ...