258资源分享网

wx.showToast的效果是这样的，太难看了

现在我们来自己写个toast

一、我们把样式写在app.wxss里，这样每个地方都可以调用到

/*toast start*/

.wxapp-toast-mask{

opacity: 0;

width: 100%;

height: 100%;

overflow: hidden;

position: fixed;

top: 0;

left: 0;

z-index: 888;

}

.wxapp-toast-content-box {

display: flex;

width: 100%;

height: 100%;

justify-content: center;

align-items: center;

position: fixed;

z-index: 999;

}

.wxapp-toast-content {

width: 50%;

padding: 20rpx;

background: rgba(0, 0, 0, 0.7);

border-radius: 20rpx;

}

.wxapp-toast-content-text {

height: 100%;

width: 100%;

color: #fff;

font-size: 28rpx;

text-align: center;

}

/*toast end*/

二、JS也是写在在app.js里：

//自定义Toast

showToast: function(text,o,count){

var _this = o;

count = parseInt(count) ? parseInt(count) : 3000;

_this.setData({

toastText:text,

isShowToast: true,

});

setTimeout(function () {

_this.setData({

isShowToast: false

});

},count);

},

三、在需要调用的wxml文件中合适的地方加上下面代码：(比如index.wxml，注意：有container要放在里面)

<view class="container">

<!--wxapp-toast start-->

<view class="wxapp-toast-content-box" wx:if="{{isShowToast}}">

<view class="wxapp-toast-content">

<view class="wxapp-toast-content-text">

{{toastText}}

</view>

</view>

</view>

<!--wxapp-toast end-->

</view>

(或者说把这段放到footer.wxml里，每个文件用include引用一下) 

四、然后在对应的js文件放一条代码：(比如对应的index.js)

app.showToast('我是自定义的Toast',that,2000);

五、效果：