微信小程序自定义吐司弹出效果实现代码

微信小程序中只有两个弹出图标，成功和加载。有时用户出错时想添加提醒图标，也可以使用wx.showToast中的图像添加图片，达到使用自定义图标的目的；但是如果图标是字体，或者提醒的内容很长(小程序中提醒的内容最多只能设置7个字，更多的会隐藏)，那么就只有自定义的吐司弹出；

步骤1:创建一个新的wxml文件，用于加载模板供以后使用，例如

然后向其中添加模板代码

模板名称=' toast '/name相当于模板的logo。引用时，很容易判断哪个视图class=' toast-out ' wx : if=' { { isshow } } '//wx:if是条件呈现。这用于确定是显示还是隐藏吐司视图中使用的阿里字体图标，并根据传入的类值更改显示的图标。view class=' toast-txt ' { txt } }//要显示的提醒内容/查看/查看/查看/查看/查看/查看/查看。吐司{位置：固定；top : 0；left : 0；z-index : 9999；宽度： 100%；高度： 100%；display: flex//小程序中常用flex布局，非常方便对齐-content : center；align-items:居中；}.干杯。烤入{最小宽度： 100像素；background: rgba(0，0，0，0.7)；padding: 6px文本对齐：中心；color:白色；border-radius : 8px；}.干杯。吐司跨度{ font-size : 30px；}.干杯。干杯。toast-txt { font-size : 14px；}第三步：在需要弹出的页面上导入吐司模板页面：

导入src=' http:/./public/html/template . wxml '/备注：/指的是返回父目录，即父目录./指返回父目录的父目录。/是根目录，绝对路径。这里也可以使用绝对路径

然后在本页的任何地方引用该模板

模板为=' toast' data=' {{txt，isshow，icon class } } '/模板步骤4:在介绍弹出页面的js中，

Isshow: false在第一页的数据中定义。//默认是隐藏的，但是我有点惊讶，如果这个属性没有定义和注释掉，可以正常隐藏和显示。

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

toastShow:function(str，icon){ var _ this=this；_this.setData({ isShow: true，txt: str，icon class : icon })；SetTimeout(function () {//toast消失_ this . setdata({ isshow : false })；}, 1500);}然后在需要吐司弹出的事件中调用该事件，例如：

log _ BTN : function(){ var name=this . data . username；If(name==''){ this.toastShow('登录名不能为空'，' icon-suo ')；}}结果：

图标是随机制作的。

或者将弹出窗口的js写入App({})，然后只需getApp()。直接toastShow()。例如：

App({ toastShow:函数(即字符串，图标){ that . setdata({ issshow : true，txt:字符串，图标类：图标})；setTimeout(函数(){ that . setdata({ isshow : false })；}, 1500);}，})然后在需要介绍弹出窗口的页面上：

var app=GetApp()；

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

His _ clear:函数(){app。吐司展示(这个，‘清除成功’，‘图标-正确’)；}，连接：小程序使用阿里字体图标

总结：与HTML不同，wx:if在小程序中的条件渲染可以实现隐藏和显示。wx:if='false '表示隐藏，true表示显示。

使用display:flex的柔性框布局很方便，比如上面弹出窗口的水平和垂直中心，只需要设置两个属性。没有必要像以前那样设置一堆其他的水平和垂直居中方法

补充：

对齐内容的可选属性有：弹性开始(全左)、弹性结束(全右)、居中(居中)、间隔、环绕、初始(从父元素继承)

可视效果：http://www.runoob.com/try/playit.php? f=playcss _ justice-content preval=flex-start

对齐项的可选属性有：拉伸、居中、伸缩开始、伸缩结束、基线(在同一基线)、初始(设置为默认值)、继承(从父元素继承该属性)

可视效果：http://www.runoob.com/try/playit.php? f=playcss _ align-items preval=基线

摘要

以上是边肖介绍的微信小程序自定义吐司弹出窗口。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！