微信小程序自定义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 实现的自定义对话框
Mar 24 Javascript
jQuery学习2 选择器的使用说明
Feb 07 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
Nov 30 Javascript
jquery和ajax的关系详细介绍
Nov 29 Javascript
Node.js中调用mysql存储过程示例
Dec 20 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
js微信支付实现代码
Dec 22 Javascript
在vue项目中,将juery设置为全局变量的方法
Sep 25 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
Oct 21 Javascript
Element PageHeader页头的使用方法
Jul 26 Javascript
react中的DOM操作实现
Jun 30 Javascript
JavaScript模拟实现网易云轮播效果
Apr 04 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通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
PHP实现恶意DDOS攻击避免带宽占用问题方法
2015/05/27 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
php创建多级目录与级联删除文件的方法示例
2019/09/12 PHP
js图片处理示例代码
2014/05/12 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
ES6学习之变量的解构赋值
2017/02/12 Javascript
vue.js实现标签页切换效果
2018/06/07 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
js实现动态时钟
2020/03/12 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
2020/07/17 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
python解析xml文件实例分析
2015/05/27 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
Python登录注册验证功能实现
2018/06/18 Python
Django 连接sql server数据库的方法
2018/06/30 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
使用Python的SymPy库解决数学运算问题的方法
2019/03/27 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
Python新手学习raise用法
2020/06/03 Python
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
《学会合作》教学反思
2014/04/12 职场文书
实习证明格式范文
2014/10/14 职场文书
幼儿园国庆节活动总结
2015/03/23 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
爱国主义电影观后感
2015/06/18 职场文书
2016庆祝国庆67周年宣传语
2015/11/25 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书