微信小程序开发之实现自定义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 相关文章推荐
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
js脚本实现数据去重
Nov 27 Javascript
Js+php实现异步拖拽上传文件
Jun 23 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
Nov 30 Javascript
BootStrap响应式导航条实例介绍
May 06 Javascript
Angular.js 实现数字转换汉字实例代码
Jul 14 Javascript
js实现时间轴自动排列效果
Mar 09 Javascript
JavaScript截屏功能的实现代码
Jul 28 Javascript
基于elementUI实现图片预览组件的示例代码
Mar 31 Javascript
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
vue项目中自定义video视频控制条的实现代码
Apr 26 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
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
JavaScript 格式字符串的应用
2010/03/29 Javascript
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
js定时调用方法成功后并停止调用示例
2014/04/08 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
2016/02/27 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
2016/09/24 Javascript
vue-router单页面路由
2017/06/17 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
vue中 v-for循环的用法详解
2020/02/19 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
Python 找到列表中满足某些条件的元素方法
2018/06/26 Python
Python有参函数使用代码实例
2020/01/06 Python
python 线程的五个状态
2020/09/22 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
马来西亚在线健康商店:Medipal Malaysia
2020/04/13 全球购物
询价采购方案
2014/06/09 职场文书
弘扬焦裕禄精神走群众路线思想汇报
2014/09/12 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
浅谈Redis缓冲区机制
2022/06/05 Redis
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技