当前位置: 首页 > 编程笔记 >

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

葛意远
2023-03-14
本文向大家介绍微信小程序开发之实现自定义Toast弹框,包括了微信小程序开发之实现自定义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:点击下载

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对小牛知识库的支持。

 类似资料:
  • 本文向大家介绍微信小程序开发之toast等弹框提示使用教程,包括了微信小程序开发之toast等弹框提示使用教程的使用技巧和注意事项,需要的朋友参考一下 介绍 微信小程序中toast消息提示框只有两种显示的效果,就是成功和加载,使用wx.showToast(OBJECT) 。 看下有关参数说明: 代码很简单: mask属性好像并没有起作用。有一点值得注意的是提示的延迟时间是有限制的,最大10000毫

  • 本文向大家介绍微信小程序 自定义弹窗实现过程(附代码),包括了微信小程序 自定义弹窗实现过程(附代码)的使用技巧和注意事项,需要的朋友参考一下 这篇文章主要介绍了微信小程序 自定义弹窗实现过程(附代码),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 小程序官网里弹出框一般都是类似下面形式: 而有时候我们需要更丰富的弹窗时,就可用自定义弹窗的样式:

  • 本文向大家介绍php微信开发之自定义菜单实现,包括了php微信开发之自定义菜单实现的使用技巧和注意事项,需要的朋友参考一下 编辑模式和开发模式是有冲突的。所以我们启用微信公众号的开发模式之后,那些菜单是看不到的哦。不过现在个人订阅号是不可以使用高级开发者模式的,如自定义菜单,不过我们还是可以通过测试号来测试一下,然后移代码到服务号。  自定义类型包括如下: 1、click:点击推事件 • 用户点击

  • 本文向大家介绍微信小程序封装自定义弹窗的实现代码,包括了微信小程序封装自定义弹窗的实现代码的使用技巧和注意事项,需要的朋友参考一下  最近在做小程序的登录,需要同时获取用户手机号和头像昵称等信息,但是小程序又不支持单个接口同时获取两种数据,因此想到自定义一个弹窗,通过弹窗按钮触发获取手机号事件。记录一下。 具体代码如下: 业务代码中:   在业务代码中引入dialog组件即可 dialog组件:

  • 本文向大家介绍微信小程序实现自定义modal弹窗封装的方法,包括了微信小程序实现自定义modal弹窗封装的方法的使用技巧和注意事项,需要的朋友参考一下 前言 小程序官方提供了 wx.showModal 方法,但样式比较固定,不能满足多元化需求,自定义势在必行~ 老规矩先上图 点击某个按钮,弹出 modal框,里面的内容可以自定义,可以是简单的文字提示,也可以输入框等复杂布局。操作完点击取消或确定关

  • 本文向大家介绍微信小程序实现自定义picker选择器弹窗内容,包括了微信小程序实现自定义picker选择器弹窗内容的使用技巧和注意事项,需要的朋友参考一下 微信小程序中定义好的几种picker选择器,不管是日期选择器还是地区选择器,或是其他的都有定死的样式和内容。 例如: 但是大多数开发程序的情况下还是需要自己写样式的,或是内容的。 例如: wxml css js 以上就是本文的全部内容,希望对大