微信小程序开发之实现自定义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 相关文章推荐
JavaScript 继承详解(四)
Jul 13 Javascript
jQuery阻止冒泡和HTML默认操作
Nov 17 Javascript
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
js 限制数字 js限制输入实现代码
Dec 04 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
Jun 06 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
Mar 22 Javascript
JavaScript事件委托的技术原理探讨示例
Apr 17 Javascript
JS实现多张图片预览同步上传功能
Jun 23 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
vue addRoutes实现动态权限路由菜单的示例
May 15 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 Javascript
ReactRouter的实现方法
Jan 25 Javascript
微信小程序开发之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
oracle资料库函式库
2006/10/09 PHP
教你识别简单的免查杀PHP后门
2015/09/13 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
thinkPHP显示不出验证码的原因与解决方法分析
2017/05/20 PHP
PHP Class SoapClient not found解决方法
2018/01/20 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
JavaScript初学者需要了解10个小技巧
2010/08/25 Javascript
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
js onclick事件传参讲解
2013/11/06 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
jQuery基础知识小结
2014/12/22 Javascript
jQuery.deferred对象使用详解
2016/03/18 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
vue组件Prop传递数据的实现示例
2017/08/17 Javascript
webpack打包js的方法
2018/03/12 Javascript
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
2020/07/20 Javascript
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
vue中axios封装使用的完整教程
2021/03/03 Vue.js
[01:21]辉夜杯战队访谈宣传片—CDEC
2015/12/25 DOTA
pycharm 使用心得(五)断点调试
2014/06/06 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
利用Pytorch实现简单的线性回归算法
2020/01/15 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
Alexandre Birman美国官网:亚历山大·伯曼
2019/10/30 全球购物
精彩的大学生自我评价
2013/11/17 职场文书
移风易俗倡议书
2014/04/15 职场文书
运动会方阵口号
2014/06/07 职场文书
计算机毕业大学生求职信
2014/06/26 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
财务总监岗位职责
2015/02/03 职场文书
tomcat下部署jenkins的方法
2022/05/06 Servers