微信小程序的弹出图标只有两种，成功和加载。本文主要介绍微信小程序自定义吐司弹出效果的实现代码，有需要的朋友可以参考一下。
微信小程序的弹出图标只有两种，成功和加载。有时用户出错时希望添加提醒图标，也可以使用wx.showToast中的图片添加图片，达到使用自定义图标的目的；但如果图标是字体，或者提醒的内容很长(小程序中提醒的内容最多只能设置为7个字，多了就隐藏了)，那么就只有自定义的吐司弹出；
步骤1:创建一个新的wxml文件来安装模板供以后使用，例如
然后在其中添加模板代码。
Template name='toast' //name相当于模板的logo，引用时很容易判断是指哪个。
class=' toast-out ' wx:if=' { { is show } } '//wx:if是条件渲染，用来判断是显示还是隐藏toast。
祝酒词
class=' icon font { { icon class } } '/span//使用Ali字体图标，显示的图标根据传入的类值而改变。
view class='toast-txt '
{{txt}}//要显示的提醒内容
/查看
/查看
/查看
/模板
第二步：定义吐司的风格。烤面包片
位置：固定；
top:0；
左：0；
z指数：9999；
宽度：100%；
身高：100%；
显示器：flex//在小程序中使用flex布局非常方便。
justify-content:居中；
对齐-项目：居中；
}。干杯。祝酒词
最小宽度：100像素；
背景：rgba(0，0，0，0.7)；
填充：6px
文本对齐：居中；
颜色：白色；
边框半径：8px
}。干杯。祝酒时间跨度
字体大小：30px
}。干杯。干杯。toast-txt {
字体大小：14px
}
步骤3:在需要弹出窗口的页面上导入toast模板页面：
导入src='././public/html/template.wxml' /
注意：/指上一个目录的父目录，两个./指父目录的父目录。/是根目录，绝对路径。这里也可以使用绝对路径。
然后参考本页上的模板。
模板是='toast' data='{{txt，isShow，iconClass}}'/template
步骤4:在js中引入弹出页面
在page的数据中，首先定义了isShow:false //，默认是隐藏的，但是我有点惊讶，如果没有定义这个属性，注释掉，它还能正常隐藏显示。
然后定义一个函数来显示弹出窗口。
toastShow:function(str，icon){
var _ this=this
_this.setData({
是的，
txt: str，
图标类：图标
});
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()。例如：
应用程序({
toastShow:函数(那个，字符串，图标){
that.setData({
是的，
txt: str，
图标类：图标
});
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是显示。
使用显示方便：flex弹性框布局，比如上面的弹出窗口的水平和垂直居中。只需设置两个属性。不需要像以前那样设置其他桩，使用以前的水平和垂直对中的方法。
补充：
justify-content的可选属性有：flex-start(全部靠左)、flex-end(全部靠右)、center(居中)、space-between、space-around、initial(从父元素继承该属性)
可视效果：http://www.runoob.com/try/playit.php? f=play CSS _ justify-content preval=flex-start
align-items的可选属性有：stretch、center、flex-start、flex-end、baseline(在同一基线中)、initial(设置为默认值)、inherit(从父元素继承该属性)。
可视效果：http://www.runoob.com/try/playit.php? f=play CSS _ align-items preval=baseline
总结
以上是边肖介绍的微信小程序自定义吐司弹窗。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对我们网站的支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。