微信小程序自定义toast弹窗效果的实现代码


Posted in Javascript onNovember 15, 2018

微信小程序里面的自带弹窗icon只有两种,success和loading。有时候用户输入错误的时候想加入一个提醒图标,也可以使用wx.showToast中的image来添加图片达到使用自定义图标的目的;但是如果图标是字体,或者提醒的内容有很长捏(小程序中提醒的内容最多只能设置7个字,多了会被隐藏),那就只有自定义toast弹窗了;

第一步:新建一个wxml文件用来装模板,方便以后使用,比如

微信小程序自定义toast弹窗效果的实现代码

然后在这里面添加模板代码

<template name="toast"> //name相当于模板的标识,引用的时候好判断引用哪一个
 <view class='toast-out' wx:if='{{isShow}}'>
//wx:if是条件渲染,使用这个是为了好判断是否显示或隐藏toast
 <view class='toast-in'>



 <span class='iconfont {{iconClass}}'></span> //使用的阿里字体图标,根据传入的class值改变显示的图标
 <view class='toast-txt'>
  {{txt}}




//需要显示的提醒内容
 </view>
 </view>
 </view>
</template>

第二步:定义toast的样式

.toast-out {
 position: fixed;
 top: 0;
 left: 0;
 z-index: 9999;
 width: 100%;
 height: 100%;
 display: flex; //小程序中多使用flex布局,很方便的
 justify-content: center;
 align-items: center;
}
.toast-out .toast-in {
 min-width: 100px;
 background: rgba(0, 0, 0, 0.7);
 padding: 6px;
 text-align: center;
 color: white;
 border-radius: 8px;
}
.toast-out .toast-in span {
 font-size: 30px;
}
.toast-out .toast-in .toast-txt {
 font-size: 14px;
}

第三步:在需要弹窗的页面import那个toast模板页面:

<import src="../../public/html/template.wxml" />

备注:../是指返回上一层目录即父目录,两个../即返回到父目录的父目录。/是根目录,绝对路径。这里也可以使用绝对路径

然后再在这个页面任何地方引用模板

<template is="toast" data="{{txt,isShow,iconClass}}"></template>

第四步:在引入弹窗页面的js中

在page的data里先定义  isShow:false //默认隐藏的  但是我有点奇怪的是,不定义这个属性,注释掉,都能正常的隐藏与显示。

 

    然后定义一个显示弹窗的函数

toastShow:function(str,icon){
 var _this = this;
 _this.setData({
 isShow: true,
 txt: str,
 iconClass:icon
 });
 setTimeout(function () { //toast消失
 _this.setData({
 isShow: false
 });
 }, 1500); 
}

 

然后在需要toast弹窗显示的事件里调用该事件就行了,比如:

log_btn:function(){
 var name=this.data.userName;if(name==""){
 this.toastShow('登录名不能为空',"icon-suo");
 }
}

 结果:

微信小程序自定义toast弹窗效果的实现代码

图标随意弄的。。。

或者是在把弹窗的js写入App({})里面,然后需要用的页面就直接getApp().toastShow()就行了。例如:

App({
 toastShow: function (that, str, icon){
 that.setData({
 isShow: true,
 txt: str,
 iconClass: icon
 });
 setTimeout(function () {
 that.setData({
 isShow: false
 });
 }, 1500);
 }, 
})

然后在需要引入弹窗的页面:

var app = getApp();

在该页面需要调用的函数中:

his_clear:function(){ 
 app.toastShow(this, "清除成功", "icon-correct"); 
},

连接:小程序使用阿里字体图标

总结: 和HTML不一样,小程序中wx:if条件渲染就可以实现隐藏与显示的wx:if="false"就是隐藏,true就是显示。

 

 使用display:flex弹性盒子布局很方便,就比如上面弹窗的水平与垂直居中,只要设置两个属性就可以了。不用再像以前一样还需要设置其它的一堆,以前水平垂直居中的方法

补充:

justify-content 的可选属性有:flex-start(全靠左),flex-end(全靠右),center(居中),space-between,space-around,initial(从父元素继承该属性)

可查看效果:http://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=flex-start

align-items 的可选属性有:stretch,center,flex-start,flex-end,baseline(处于同一条基线),initial(设置为默认值),inherit(从父元素继承该属性)

可查看效果:http://www.runoob.com/try/playit.php?f=playcss_align-items&preval=baseline

总结

以上所述是小编给大家介绍的微信小程序之自定义toast弹窗,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Ext JS Grid在IE6 下宽度的问题解决方法
Feb 15 Javascript
javascript 从if else 到 switch case 再到抽象
Jul 17 Javascript
json2.js的初步学习与了解
Oct 06 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 Javascript
js调试系列 初识控制台
Jun 18 Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 Javascript
Bootstrap零基础入门教程(三)
Jul 18 Javascript
微信js-sdk上传与下载图片接口用法示例
Oct 12 Javascript
ES6生成器用法实例分析
Apr 10 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
JS实现微信摇一摇原理解析
Jul 22 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 Javascript
搭建基于express框架运行环境的方法步骤
Nov 15 #Javascript
用图片替换checkbox原始样式并实现同样的功能
Nov 15 #Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 #Javascript
微信小程序页面缩放式侧滑效果的实现代码
Nov 15 #Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 #Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
Nov 15 #Javascript
判断iOS、Android以及PC端的示例代码
Nov 15 #Javascript
You might like
PHP 页面编码声明方法详解(header或meta)
2010/03/12 PHP
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
jquery选择器(常用选择器说明)
2010/09/28 Javascript
javascript动态加载二
2012/08/22 Javascript
jQuery 实现侧边浮动导航菜单效果
2014/12/26 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
使用node+vue.js实现SPA应用
2016/01/28 Javascript
JavaScript中数组的22种方法必学(推荐)
2016/07/20 Javascript
ES6中Iterator与for..of..遍历用法分析
2017/03/31 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
ajax请求data遇到的问题分析
2018/01/18 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
css3 中的新特性加强记忆详解
2016/04/16 HTML / CSS
html5中JavaScript removeChild 删除所有节点
2014/05/16 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
德国消费电子产品购物网站:Guter Kauf
2020/09/15 全球购物
高中微机老师自我鉴定
2014/02/16 职场文书
岗位职责说明书
2014/05/07 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
员工离职感谢信
2015/01/22 职场文书
应聘教师自荐信
2015/03/26 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
教师节班会主持词
2015/07/06 职场文书
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL