微信小程序之自定义toast弹窗
微信小程序里面的自带弹窗icon只有两种,success和loading。有时候用户输入错误的时候想加入一个提醒图标,也可以使用wx.showToast中的image来添加图片达到使用自定义图标的目的;但是如果图标是字体,或者提醒的内容有很长捏(小程序中提醒的内容最多只能设置7个字,多了会被隐藏),那就只有自定义toast弹窗了;
第一步:新建一个wxml文件用来装模板,方便以后使用,比如
然后在这里面添加模板代码
<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");} }
结果:
图标随意弄的。。。
或者是在把弹窗的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
转载于:https://www.cnblogs.com/zjjDaily/p/8031953.html
微信小程序之自定义toast弹窗相关推荐
- 微信小程序之自定义模态弹窗(带动画)实例
代码地址如下: http://www.demodashi.com/demo/13991.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.c ...
- 【微信小程序】自定义弹窗蒙版输入框效果图完整代码
[微信小程序]自定义弹窗文本输入框效果图&完整代码 效果图 在输入框中进行内容的输入 点击确认后在姓名一栏进行更新修改 点击返回后姓名一栏不做任何修改 在这个的基础上你可以自定义任何弹窗 wx ...
- 微信小程序图标不支持html,微信小程序实现自定义加载图标功能
效果图 实现思路 1.首先通过HTML+CSS实现加载动画的静态效果: 2.根据需求给每个动画设计不同的动画效果. 例如第一个加载图标的静态绘制 1.首先确定动画的盒子宽高: 2.设置盒子中每一个长方 ...
- 微信小程序可以加服务器上的字体,微信小程序中自定义字体
微信小程序支持自定义字体开放出来也有段时间,这边整理下使用自定义字体中,容易忽略的一些问题,和简便的全局自定义方式.如果是同时加载两种字体包,先下载下来的会被后下载下来的字体包给覆盖. 官网接口文档 ...
- 微信小程序之——自定义分享按钮(完整版)
声明 onShareAppMessage 函数 onShareAppMessage() { return { title: '弹出分享时显示的分享标题' desc: ' ...
- 微信小程序wepy自定义card控件封装
微信小程序wepy自定义card控件 在利用wepy开发小程序的过程中,需要使用自定义控件来实现,但是很多时候,若直接在page页面中写对应的控件,下次在另一个页面中,想使用同样的控件又需要重新绑定数 ...
- 【微信小程序】自定义加载动画3
目录 效果图 配置 版本1 版本2 结语 效果图 配置 配置方法参考上一篇文章:[微信小程序]自定义加载动画 版本1 Component({behaviors
- 【微信小程序】自定义加载动画4
目录 效果图 配置文件 结语 效果图 配置文件 配置方法参考上一篇文章:[微信小程序]自定义加载动画 组件源代码: Component({behaviors: [],properties: {
- 微信小程序 原生开发 实现弹窗遮罩层 并且在遮罩层内使用scroll-view实现滚动内容(包括图片)
微信小程序 原生开发 实现弹窗遮罩层 并且在遮罩层内可以滚动内容(包括图片) 效果图 这里的遮罩层内容由两张图片构成 底图+内部内容 实现代码 wxml 使用云开发的存储,自己开发的时候换掉src即可 ...
最新文章
- HTML5+MUI+HBuilder 之初探情人
- WDF驱动中KMDF与UMDF区别
- 轴等比缩放_CAD教程:自由缩放命令的操作流程
- YOLOv5添加注意力机制 Pytorch
- 解析针对 HTTP/2 协议的不同步攻击
- 记事本快捷键设置 java_Java给JFrame窗口设置热键---不完整记事本
- ssl1197-质数和分解【dp练习】
- spark SQL学习(认识spark SQL)
- 不加群提取群成员_QQ群引流推广怎么做
- 悉尼大学计算机科学专业,悉尼大学计算机科学专业怎么样
- API是什么意思,具体是什么?
- 青少儿科学小实验:水的表面张力
- 通过命令行清理360安全卫士批处理
- 用python计算债券YTM
- 一款功能强大的设备调试、接口调试工具
- 关于bitset中的 to_ulong()的解答
- 投影仪硬件边缘融合服务器,带你了解投影融合的边缘融合显示技术
- 金融风控指标:WOE, IV, KS,LIFT值和PSI
- 【Windows 问题系列第 2 篇】如何让显示的窗口在桌面的最上面,而不被其它窗口遮挡?
- CCT之CAMERA TUNNING调试学习总结