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

前端之家收集整理的这篇文章主要介绍了微信小程序 自定义Toast实例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

自定义Toast Box" style="opacity:{{0.9}}" wx:if="{{isShowToast}}"> {{toastText}} Box" style="opacity:{{0.9}}" wx:if="{{isShowToast}}"> {{toastText1}}
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; }
/**

  • 页面的初始数据
    /
    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) {

},})

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持

猜你在找的微信小程序相关文章