微信小程序开发之实现自定义Toast弹框
更新时间：2017年06月08日 11:54:11 作者：何东_hd
Toast相信对于利用微信小程序开发的朋友们来说都不陌生，有时候官方的样式并不能满足业务要求，怎么办呢，当然有解决办法了。有一个插件可以直接帮我们完成WeToast，这篇文章主要给大家介绍了微信小程序开发之实现自定义Toast弹框的相关资料，需要的朋友可以参考下。
前言
之前有篇文章是写的Toast使用，但是有时候官方的样式并不能满足业务要求，怎么办呢，当然有解决办法了。有一个插件可以直接帮我们完成，WeToast。
先来看一下效果图：
怎么用呢，我们来看一下：
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：点击下载
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
这篇文章主要介绍了JS实现汉字与Unicode码相互转换的方法,结合实例形式较为详细的分析了javascript针对汉字与Unicode编码转换的操作技巧与相关注意事项,需要的朋友可以参考下2017-04-04
下面小编就为大家带来一篇JavaScript几种数组去掉重复值的方法推荐。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看2016-04-04
这篇文章主要是对判断javascript的数据类型(示例代码)进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
不是效率的问题 是 内存碎片的问题 用数组速度比“+”要慢 只是内存占的少和内存碎片少一些，现在根本不推荐用数组来处理了。2010-12-12
escape、encodeURI 和 encodeURIComponent 的区别
escape(), encodeURI()和encodeURIComponent()是在Javascript中用于编码字符串的三个常用的方法，而他们之间的异同却困扰了很多的Javascript初学者，今天我就在这里对这三个方法详细地分析与比较一下。2009-03-03
本篇文章主要介绍了webpack 多入口配置 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要为大家详细介绍了Bootstrap按钮组的简单实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了javascript实现详细时间提醒信息效果的方法,涉及javascript操作时间的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
本文给大家介绍js点击点击某个图标或按钮弹出文件选择框的实现代码，代码简单易懂，非常不错，感兴趣的朋友可以参考下2016-09-09
这篇文章主要介绍了详解将微信小程序接口Promise化并使用async函数，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
最新评论