如何在微信小程序中自定义toast？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
1、新建toast组件
在toast.json里修改如下，设置为组件
计算
安全
数据库
网络和加速
企业服务
{
"component": true
}toast.wxml
<view class='wx-toast-box' animation="{{animationData}}">
<view class='wx-toast-content'>
<view class='wx-toast-toast'>{{ content }}</view>
</view>
</view>定义样式，toast.wxss，这里使用flex布局，代码很简单，也没什么好说的，直接贴上
.wx-toast-box{
display: flex;
width: 100%;
justify-content: center;
position: fixed;
z-index: 999;
bottom:80rpx;
opacity: 0;
}
.wx-toast-content{
max-width: 80%;
border-radius:30rpx;
padding: 30rpx;
background: rgba(0, 0, 0, 0.6);
}
.wx-toast-toast{
height: 100%;
width: 100%;
color: #fff;
font-size: 28rpx;
text-align: center;
}toast.js
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
/**
* 私有数据,组件的初始数据
* 可用于模版渲染
*/
data: { // 弹窗显示控制
animationData: {},
content: '提示内容'
},
/**
* 组件的方法列表
*/
methods: {
/**
* 显示toast，定义动画
*/
showToast(val) {
var animation = wx.createAnimation({
duration: 300,
timingFunction: 'ease',
})
this.animation = animation
animation.opacity(1).step()
this.setData({
animationData: animation.export(),
content: val
})
/**
* 延时消失
*/
setTimeout(function () {
animation.opacity(0).step()
this.setData({
animationData: animation.export()
})
}.bind(this), 1500)
}
}
})2、在父级组件中调用公共组件，以login页面为例
在login.json中注册组件
{
"navigationBarTitleText": "登录注册",
"usingComponents":{
"toast": "../common/toast/toast"
}
}login.wxml中调用组件
<view>
<toast id='toast'>
</toast>
</view>login.js里点击登陆录的时候调用显示showDialog方法
onReady: function () {
this.toast = this.selectComponent("#toast");
},
listenerLogin: function() {
this.dialog.showToast('恭喜你，获得了toast');
},看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
