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

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

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

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

自定义Toast

{{toastText}}

{{toastText1}}

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.cohttp://unt);

},

/* 点击按钮 */

btn_toast: function () {

console.log("点击了按钮")

//设置toast时间，toast内容

this.setData({

count: 1500,

toastText: '自定义',

toastText1: 'Toast'

});

this.showToast();

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

},})

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。