百度小程序自定义通用toast组件

BdToast百度小程序自定义通用组件-github地址

需求
手百小程序的toast仅支持在页中展示，不能自定义位置、字体大小、在单个文本中增加icon等需求；因此自定义一个全局可通用的Toast。

效果预览
image
image
image
image

如何使用
代码目录位于 /widget/toast 下，包含3个文件

toast.js 脚本代码
toast.css 样式文件，可以根据自己需求定制
toast.swan 模板结构，可以根据自己需求定制
使用步骤一：
将/widget/toast的三个文件，放在与page同名的widget文件夹中，如果项目没有widget文件夹，就新建一个。

image

使用步骤二：
在项目的整个 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~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序自定义toast弹窗效果的实现代码

    微信小程序里面的自带弹窗icon只有两种,success和loading.有时候用户输入错误的时候想加入一个提醒图标,也可以使用wx.showToast中的image来添加图片达到使用自定义图标的目的:但是如果图标是字体,或者提醒的内容有很长捏(小程序中提醒的内容最多只能设置7个字,多了会被隐藏),那就只有自定义toast弹窗了: 第一步:新建一个wxml文件用来装模板,方便以后使用,比如 然后在这里面添加模板代码 <template name="toast"> //nam

  • 详解微信小程序开发之——wx.showToast(OBJECT)的使用

    详解微信小程序开发之——wx.showToast(OBJECT)的使用

    wx.showToast API是显示消息提示框的作用. 先让我们看一下官方的文档说明: 注意:其中的图标,只支持"success"."loading" 示例代码: wx.showToast({ title: '成功', icon: 'success', duration: 2000 }) 接下来演示如何使用,先打开微信web开发者工具,新建快速项目,删除掉首页没用的内容,保留如下部分. 添加两个按钮,同事添加点击事件.再在按钮上添加navigator导航,链接到默

  • 微信小程序开发之实现自定义Toast弹框

    微信小程序开发之实现自定义Toast弹框

    前言 之前有篇文章是写的Toast使用,但是有时候官方的样式并不能满足业务要求,怎么办呢,当然有解决办法了.有一个插件可以直接帮我们完成,WeToast. 先来看一下效果图: 怎么用呢,我们来看一下: WeTaost插件源码位于src目录下,包含3个文件. wetoast.js: 脚本代码 wetoast.wxml: 模板结构 wetoast.wxss: 样式 使用时只需要加入以上3个文件即可 第一步:在项目的app.js中引入wetoast.js,并注册到小程序上,小程序所有Page页面均可使

  • 微信小程序使用component自定义toast弹窗效果

    前言 微信小程序自带的消息提示框有字数限制,而且图标仅仅只有"success","loading","none".当我们在实际开发过程中,面对UI给的设计图稿和微信小程序默认提供的消息提示框具有很大差别的时候,自然就不能再使用微信小程序的消息提示框,而应当使用component自定义消息提示框组件. 效果图 Step1:初始化组件 新建一个components文件夹,这个文件夹用来存放我们以后要开发的所有自定义组件. 然后在components文

  • 微信小程序开发之toast等弹框提示使用教程

    微信小程序开发之toast等弹框提示使用教程

    介绍 微信小程序中toast消息提示框只有两种显示的效果,就是成功和加载,使用wx.showToast(OBJECT) . 看下有关参数说明: 代码很简单: wx.showToast({ title: '成功', icon: 'succes', duration: 1000, mask:true }) mask属性好像并没有起作用.有一点值得注意的是提示的延迟时间是有限制的,最大10000毫秒. 还有一个函数是wx.hideToast() ,这个是隐藏toast,主要用于显示加载提示的时候用到,

  • 百度小程序自定义通用toast组件

    BdToast百度小程序自定义通用组件-github地址 需求 手百小程序的toast仅支持在页中展示,不能自定义位置.字体大小.在单个文本中增加icon等需求:因此自定义一个全局可通用的Toast. 效果预览 image image image image 如何使用 代码目录位于 /widget/toast 下,包含3个文件 toast.js 脚本代码 toast.css 样式文件,可以根据自己需求定制 toast.swan 模板结构,可以根据自己需求定制 使用步骤一: 将/widget/to

  • 微信小程序自定义modal弹窗组件的方法详解

    微信小程序自定义modal弹窗组件的方法详解

    微信小程序开发中官方自带的wx.showModal,这个弹窗API有时候并不能满足我们的弹窗效果,所以往往需要自定义modal组件.下面我们进行一个自定义modal弹窗组件的开发,并进行组件的引用,组件可自定义底部是一个还是两个按钮.效果如下. 首先我们可以在跟目录下创建一个components文件夹存放所有的组件.新建一个modal文件夹,下面新建modal.js.modal.json.modal.wxml.modal.wxss四个文件. modal.wxml布局文件: <view class

  • 微信小程序自定义顶部导航组件

    微信小程序自定义顶部导航组件

    本文实例为大家分享了微信小程序自定义顶部导航组件,供大家参考,具体内容如下 在components中新建文件夹navbar components/navbar.wxml <!--components/navbar.wxml--> <view class="navbar" style="height:{{navHeight+5}}px;background-image:url('{{imgUrl}}') ">   <!-- 左上角 返回按

  • 微信小程序自定义模态弹窗组件详解

    微信小程序自定义模态弹窗组件详解

    小程序自带一个showModal弹窗,调用很简单,但是限制很多,title有字数限制,中间的content也只能放文字不能放组件,所以作为一个前端碰到那种连续好几个跟微信自带的模态弹窗风格一模一样,但是功能又花里胡哨的UI稿,就不能忍受频繁的复制粘贴了.自己写了一个组件,虽然调用起来比微信自带的麻烦一点,但是还蛮实用的. 效果大概长这样. 上代码: wxml: <!-- 自定义模态弹窗 --> <view class="modalDIY" wx:if="{{

  • 微信小程序自定义导航栏（模板化）

    前段时间写过一篇关于微信小程序自定义导航栏的自定义组件,但是对于分享页有一定的bug 这次用模板化又搞了一遍 优化了下Android与IOS 显示更接近微信原生的导航栏,以及修复分享页面不显示返回首页按钮 如果大家不习惯模板化的话可以 针对自己的需求拿以前封装的组件化做一些修改 微信小程序自定义导航栏(组件化) CustomNavBar.wxml <template name="CustomNavBar"> <block wx:if="{{ showNavB

  • 微信小程序自定义toast组件的方法详解【含动画】

    微信小程序自定义toast组件的方法详解【含动画】

    本文实例讲述了微信小程序自定义toast组件的方法.分享给大家供大家参考,具体如下: 怎么创建就不说了,前面一篇有 微信小程序自定义prompt组件 直接上代码 wxml <!-- components/toast/toast.wxml --> <view class="toast-box {{isShow? 'show':''}}" animation="{{animationData}}"> <view class="to

  • 微信小程序自定义组件

    前言 最近接触微信小程序,再次之前公司用的前端框架是vue ,然后对比发现,开发小程序是各种限制,对于开发者非常不友好.各种槽点太多,完全吐槽不过来,所以在此不多说,打算下次专门写一篇文章吐槽一下.本次主要分享下小程序自定义组件的一点思路,小程序官方提供的框架比较简陋,原始,可复用较差,没有实现自定义组件的功能,这让很多使用vue ,react前端开发非常难受.网上存在各种吐槽,也有分享实现自定义组件的方法,但是要么过于复杂,要么是微信小程序升级之后就不兼容,反正是各种坑你没商量.在这分享下本人

  • 微信小程序自定义toast的实现代码

    今天写微信小程序突然发现一个尴尬的问题,请求报错需要提示,就去小程序API里找,可悲的小程序的toast并不能满足我的需求,原生提供的方法调用如下 wx.showToast({ title: '成功', icon: 'succes', duration: 1000, mask:true }) 下面是官方API的说明 可以看到支持的图标只有两种,连基本的warning和error都没有,最可悲的是title最多只支持7个汉字的长度,完全不能忍啊,现在哪个框架里还没有个正儿八经提示框的组件,想想还是

  • 微信小程序自定义地址组件

    微信小程序自定义地址组件

    本文实例为大家分享了微信小程序自定义地址组件的具体代码,供大家参考,具体内容如下 项目需求 需要调用后台传过来的地址,存储地址时存的是地址的id,所以市面上的地址组件均不符合我的需求,只能自定义一个. 技术选取 picker-view和picker-view-column 核心代码 region.wxml <!--地址选择器--> <view wx:if="{{show}}" class="region-picker" catchtap="

  • 微信小程序 自定义Toast实例代码

    微信小程序 自定义Toast实例代码

    微信小程序 自定义Toast实例代码 Toast样式可以根据需求自定义,本例中是圆形 <!--按钮--> <view class="btn" bindtap="btn_toast">自定义Toast</view> <!--以下为toast显示的内容 opacity为透明度--> <view class="toast_box" style="opacity:{{0.9}}"

随机推荐