前端之家
  • 首页
  • 技术问答
  • 编程语言
  • 前端开发
  • 移动开发
  • 开发工具
  • 程序设计
  • 行业应用
  • CMS系统
  • 服务器
  • ▸ PHP
  • ▸ Java
  • ▸ Java SE
  • ▸ Python
  • ▸ C#
  • ▸ C&C++
  • ▸ Ruby
  • ▸ VB
  • ▸ asp.Net
  • ▸ Go
  • ▸ Perl
  • ▸ netty
  • ▸ Django
  • ▸ Delphi
  • ▸ Jsp
  • ▸ .NET Core
  • ▸ Spring
  • ▸ Flask
  • ▸ Springboot
  • ▸ SpringMVC
  • ▸ Lua
  • ▸ Laravel
  • ▸ Mybatis
  • ▸ Asp
  • ▸ Groovy
  • ▸ ThinkPHP
  • ▸ Yii
  • ▸ swoole
  • ▸ HTML
  • ▸ HTML5
  • ▸ JavaScript
  • ▸ CSS
  • ▸ jQuery
  • ▸ Bootstrap
  • ▸ Angularjs
  • ▸ TypeScript
  • ▸ Vue
  • ▸ Dojo
  • ▸ Json
  • ▸ Electron
  • ▸ Node.js
  • ▸ extjs
  • ▸ Express
  • ▸ XML
  • ▸ ES6
  • ▸ Ajax
  • ▸ Flash
  • ▸ Unity
  • ▸ React
  • ▸ Flex
  • ▸ Ant Design
  • ▸ Web前端
  • ▸ 微信小程序
  • ▸ 微信公众号
  • ▸ iOS
  • ▸ Android
  • ▸ Swift
  • ▸ Hybrid
  • ▸ Cocos2d-x
  • ▸ Flutter
  • ▸ Xcode
  • ▸ Silverlight
  • ▸ cocoa
  • ▸ Cordova
  • 前端之家
  • 微信小程序
  • 微信小程序开发之实现自定义Toast弹框

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

2019-01-03 微信小程序 前端之家
前端之家收集整理的这篇文章主要介绍了微信小程序开发之实现自定义Toast弹框,前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

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

先来看一下效果图:

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

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

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

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

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

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

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

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

第三步:引入WeToast模板