微信小程序自定义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 相关文章推荐
JQUERY 浏览器判断实现函数
Aug 20 Javascript
js去字符串前后空格5种实现方法及比较
Apr 03 Javascript
JS应用正则表达式转换大小写示例
Sep 18 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
node.js 动态执行脚本
Jun 02 Javascript
jQuery Chosen通用初始化
Mar 07 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 Javascript
详解各版本React路由的跳转的方法
May 10 Javascript
vue cli 3.0 使用全过程解析
Jun 14 Javascript
JavaScript创建对象方法实例小结
Sep 03 Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 09 Javascript
js绘制一条直线并旋转45度
Aug 21 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将数组存储为文本文件方法汇总
2015/10/28 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
Laravel下生成验证码的类
2017/11/15 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
javascript 文档的编码问题解决
2009/03/01 Javascript
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
2013/01/09 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
JavaScript编写连连看小游戏
2015/07/07 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
2016/02/25 Javascript
基于JavaScript实现树形下拉框
2016/08/10 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
jQuery实现拖拽可编辑模块功能代码
2017/01/12 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
2019/05/07 Javascript
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
python enumerate内置函数用法总结
2020/01/07 Python
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
监理资料员岗位职责
2014/01/03 职场文书
年会搞笑主持词
2014/03/27 职场文书
班主任个人工作反思
2014/04/28 职场文书
文明好少年事迹材料
2014/08/19 职场文书
导航工程专业自荐信
2014/09/02 职场文书
家长会欢迎词
2015/01/23 职场文书
六一晚会主持词开场白
2015/05/28 职场文书
python3实现无权最短路径的方法
2021/05/12 Python
Redis 持久化 RDB 与 AOF的执行过程
2021/11/07 Redis