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


Posted in Javascript onJune 08, 2017

前言

之前有篇文章是写的Toast使用,但是有时候官方的样式并不能满足业务要求,怎么办呢,当然有解决办法了。有一个插件可以直接帮我们完成,WeToast。

先来看一下效果图:

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

怎么用呢,我们来看一下:

WeTaost插件源码位于src目录下,包含3个文件。

  • wetoast.js: 脚本代码
  • wetoast.wxml: 模板结构
  • wetoast.wxss: 样式

使用时只需要加入以上3个文件即可

第一步:在项目的app.js中引入wetoast.js,并注册到小程序上,小程序所有Page页面均可使用

//app.js
let {WeToast} = require('src/wetoast.js')

//注册小程序,接收一个Object参数
App({
 WeToast
})

第二步:在项目的app.wxss中引入wetoast.wxss

@import "src/wetoast.wxss";

至于里面的样式,弹框大小,可自行修改。

第三步:引入WeToast模板

<import src="../../src/wetoast.wxml"/>
<!-- wetoast -->
<template is="wetoast" data="{{...__wetoast__}}"/>

最后要想在那个页面使用,就在onLoad里面创建WeToast实例:

// 获取应用实例
let app = getApp()

Page({
 data: {},

 // 仅执行一次,可用于获取、设置数据
 onLoad: function () {
  //创建可重复使用的WeToast实例,并附加到this上,通过this.wetoast访问
  new app.WeToast()
 },

 onTimeToast: function () {
  this.wetoast.toast({
   title: '请输入手机号',
   duration: 1000
  })
 }
})

可以自定义持续时间,很方便。

demo:点击下载

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js和jquery批量绑定事件传参数一(新猪猪原创)
Jun 23 Javascript
密码框显示提示文字jquery示例
Aug 29 Javascript
JavaScript中使用Substring删除字符串最后一个字符
Nov 03 Javascript
关于JavaScript对象的动态选择及遍历对象
Mar 10 Javascript
js实现简单计算器
Nov 22 Javascript
如何使用headjs来管理和异步加载js
Nov 29 Javascript
你真的了解BOM中的history对象吗
Feb 13 Javascript
js使用highlight.js高亮你的代码
Aug 18 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
Nov 26 Javascript
Angular value与ngValue区别详解
Nov 27 Javascript
vue 函数调用加括号与不加括号的区别
Oct 29 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
微信小程序开发之toast等弹框提示使用教程
Jun 08 #Javascript
javascript实现二叉树遍历的代码
Jun 08 #Javascript
微信小程序tabbar不显示解决办法
Jun 08 #Javascript
javascript实现二叉树的代码
Jun 08 #Javascript
微信小程序搜索组件wxSearch实例详解
Jun 08 #Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 #Javascript
angular实现图片懒加载实例代码
Jun 08 #Javascript
You might like
PHP的开合式多级菜单程序
2006/10/09 PHP
深入了解PHP类Class的概念
2012/06/14 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
Js与下拉列表处理问题解决
2014/02/13 Javascript
jQuery使用ajaxSubmit()提交表单示例
2014/04/04 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
详解AngularJS中module模块的导入导出
2015/12/10 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
javascript实现表单验证
2016/01/29 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
node.js遍历目录的方法示例
2018/08/01 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
Angular value与ngValue区别详解
2019/11/27 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
[07:59]2014DOTA2叨叨刀塔 林熊猫称被邀请赛现场盛况震撼
2014/07/21 DOTA
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
Python去除字符串两端空格的方法
2015/05/21 Python
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
Python3中使用urllib的方法详解(header,代理,超时,认证,异常处理)
2016/09/21 Python
利用aardio给python编写图形界面
2017/08/21 Python
Python3.5内置模块之os模块、sys模块、shutil模块用法实例分析
2019/04/27 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
Python astype(np.float)函数使用方法解析
2020/06/08 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
高中生职业规划范文
2014/03/09 职场文书
公务员考察材料范文
2014/12/23 职场文书
参观邀请函范文
2015/02/02 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android