⼩程序之⾃定义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==""){
}
}
结果：
图标随意弄的。。。
或者是在把弹窗的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(){
},
连接：
总结：和HTML不⼀样，⼩程序中wx:if条件渲染就可以实现隐藏与显⽰的wx:if="false"就是隐藏，true就是显⽰。
  　使⽤display:flex弹性盒⼦布局很⽅便，就⽐如上⾯弹窗的⽔平与垂直居中，只要设置两个属性就可以了。不⽤再像以前⼀样还需要设置其它的⼀堆，以前
补充：
  justify-content 的可选属性有：flex-start（全靠左），flex-end（全靠右），center（居中），space-between，space-
around，initial（从⽗元素继承该属性）
  align-items 的可选属性有：stretch，center，flex-start，flex-end，baseline（处于同⼀条基线），initial（设置为默认值），inherit（从⽗元素继承该属性）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。