只有相信自己的目标，努力工作和奋斗的人才能取得最终的成功。但是我一直相信的一件事是，当您触摸自己哭泣时，您就成功了！
微信小程序 自定义Toast实例代码
Toast样式可以根据需求自定义，本例中是圆形
<!--按钮-->
<view class="btn" bindtap="btn_toast">自定义Toast</view>
<!--以下为toast显示的内容 opacity为透明度-->
<view class="toast_box" style="opacity:{{0.9}}" wx:if="{{isShowToast}}">
{{toastText}}
</view>
<view class="toast_box" style="opacity:{{0.9}}" 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实例代码就介绍到这了。大学校园色彩单调，却不乏味，虽然每天校园都重复着同一种节奏，但是故事却不尽相同，大学校园承载着莘莘学子心中的梦，也是心中的梦实现的地方。让我们以美妙的青春为圆心，以丰富的知识为半径，在大学校园中画出人生中最完美的一个圆。更多相关微信小程序 自定义Toast实例代码内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
