小程序：手写showToast

小程序自学网站推荐：http://www.51zxw.net/study.asp?vip=4857021

wxml：

<button bindtap='btnclick'>toast</button>



<view class='box' wx:if='{{showToast}}' >
    <view class='window'>
        <view class='text'>
            {{text}}
        </view>
    
    </view>
</view>

wxss：

.box{
    width: 100%;
    height: 100%;
    z-index: 10;
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.window{
    width: 50%;
    padding: 20px;
    background: rgba(0,0,0,0.5);
    border-radius: 20rpx;
}

.text{
    color: #fff;
    text-align: center;
}

js：

  data: {
      text:"提交成功！",
      showToast:false,
  },

    btnclick:function(){
        var self=this;
        this.setData({
            showToast: true,
        });
        setTimeout(function(){
            self.setData({
                showToast: false,
            });
        },1500)
    },

效果：