微信小程序自定义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 相关文章推荐
20款效果非常棒的 jQuery 插件小结分享
Nov 18 Javascript
jquery属性过滤选择器使用示例
Jun 18 Javascript
javascript 寻找错误方法整理
Jun 15 Javascript
JavaScript操作URL的相关内容集锦
Oct 29 Javascript
JavaScript基础之this详解
Jun 04 Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
Vue中如何实现proxy代理
Apr 20 Javascript
vue-cli 为项目设置别名的方法
Oct 15 Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
原生js无缝轮播插件使用详解
Mar 09 Javascript
详解关于Vue单元测试的几个坑
Apr 26 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的错误信息
2006/10/09 PHP
一个ubbcode的函数,速度很快.
2006/10/09 PHP
PHP新手上路(三)
2006/10/09 PHP
PHP操作数组的一些函数整理介绍
2011/07/17 PHP
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
ThinkPHP实现二级循环读取的方法
2014/11/03 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
详解PHP神奇又有用的Trait
2019/03/25 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
Thinkphp 框架扩展之Widget扩展实现方法分析
2020/04/23 PHP
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
jquery获取form表单input元素值的简单实例
2016/05/30 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
详解JavaScript 事件流
2020/09/02 Javascript
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
Python 移动光标位置的方法
2019/01/20 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
深入解析HTML5中的Blob对象的使用
2015/09/08 HTML / CSS
HTML5新特性之用SVG绘制微信logo
2016/02/03 HTML / CSS
HTML5实现预览本地图片
2016/02/17 HTML / CSS
如何开发一个JQuery插件
2016/07/28 面试题
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
Sql Server之数据类型详解
2022/02/28 SQL Server
星际争霸 Light vs Action 一场把教主看到鬼畜的比赛
2022/04/01 星际争霸
Python实现视频自动打码的示例代码
2022/04/08 Python
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android
Django框架中表单的用法
2022/06/10 Python