微信小程序开发之实现自定义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 效率组装字符串 StringBuffer
Dec 23 Javascript
基于jquery的web页面日期格式化插件
Nov 15 Javascript
php与js的区别是什么
Aug 05 Javascript
iframe父页面获取子页面参数的方法
Feb 21 Javascript
js调试系列 源码定位与调试[基础篇]
Jun 18 Javascript
js关于getImageData跨域问题的解决方法
Oct 14 Javascript
利用PM2部署node.js项目的方法教程
May 10 Javascript
JavaScript数组push方法使用注意事项
Oct 30 Javascript
使用async-validator编写Form组件的方法
Jan 10 Javascript
一些可能会用到的Node.js面试题
Jun 15 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 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
用PHP生成静态HTML速度快类库
2007/03/18 PHP
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
IE innerHTML,outerHTML所引起的问题
2009/06/04 Javascript
jquery获取input表单值的代码
2010/04/19 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
浅谈javascript中this在事件中的应用
2015/02/15 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
2016/06/24 Javascript
解决前端跨域问题方案汇总
2016/11/20 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
手淘flexible.js框架使用和源代码讲解小结
2018/10/15 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
2019/04/23 Javascript
使用JavaScript计算前一天和后一天的思路详解
2019/12/20 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
python中安装模块包版本冲突问题的解决
2017/05/02 Python
解决python使用open打开文件中文乱码的问题
2017/12/29 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
python爬虫添加请求头代码实例
2019/12/28 Python
python实现人脸签到系统
2020/04/13 Python
5款实用的python 工具推荐
2020/10/13 Python
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
采购类个人求职的自我评价
2014/02/18 职场文书
大学生求职计划书
2014/04/30 职场文书
幼儿园标语大全
2014/06/19 职场文书
学风建设演讲稿
2014/09/12 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers