微信小程序如何实现自定义Toast

这篇文章主要介绍微信小程序如何实现自定义Toast，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

微信小程序 自定义Toast实例代码

Toast样式可以根据需求自定义，本例中是圆形

<!--按钮-->   <view class="btn" bindtap="btn_toast">自定义Toast</view>   <!--以下为toast显示的内容 opacity为透明度-->   <view class="toast_box"  wx:if="{{isShowToast}}">      {{toastText}}    </view>   <view class="toast_box"  wx:if="{{isShowToast}}">      {{toastText1}}    </view>

Page {    background: #f9f9f9;   }   /*按钮*/   .btn {    width: 20%;     margin-left: 38%;   margin-top: 100rpx;   text-align: center;    border-radius: 10rpx;    border: 10px solid #f00;    background: #f00;   color: #fff;    font-size: 22rpx;  }   /*toast*/   .toast_box {    width: 30%;    height: 221rpx;   margin-top: 60rpx;    margin-left: 35%;   text-align: center;    border-radius: 166rpx;    background: #f00;   color: #fff;    font-size: 32rpx;   line-height: 220rpx;   }

Page({     /**    * 页面的初始数据    */   data: {    //toast默认不显示     isShowToast: false     },   showToast: function () {    var _this = this;    // toast时间     _this.data.count = parseInt(_this.data.count) ? parseInt(_this.data.count) : 1000;    // 显示toast     _this.setData({     isShowToast: true,    });    // 定时器关闭     setTimeout(function () {     _this.setData({      isShowToast: false     });    }, _this.data.count);   },   /* 点击按钮 */   btn_toast: function () {    console.log("点击了按钮")    //设置toast时间，toast内容     this.setData({     count: 1500,     toastText: '自定义',     toastText1: 'Toast'    });    this.showToast();   },    /**    * 生命周期函数--监听页面加载    */   onLoad: function (options) {      },})

以上是“微信小程序如何实现自定义Toast”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！