最近在开发小程序，毕竟第一次开发，什么都是重头来，不过好在文档什么的都很详细，不过踩坑还是必须的，今天踩坑就是小程序的toast组件。在开发项目的时候，toast提示是不可避免的，好在小程序也有相对的组件，在使用工具开发的时候没发现什么问题，但在真机上使用的时候，会发现toast提示文字过多的时候，超过两行的文字会被遮住。怎么办呢？文档上也有说最多只能七个字或者两行。这个时候只能自己写了。下面是组件代码：
toast.js
let toast_timer = null;
Component({
/**
* 组件的属性列表
*/
properties: {
title: {
type: String,
value: ''
},
toastType: {
type: String,
value: 'default', // default || success || warning || error || loading
},
image: {
type: String,
value: ''
},
hidden: {
type: Boolean,
value: true
},
duration: {
type: Number,
value: 1.5
},
durationCustom: {
//是否需要自定义弹窗时间，默认会根据弹出内容的长度大小来控制显示时间
type: Boolean,
value: false
},
textPosition:{
type: String,
value:'center'
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
showToast: function(message) {
let toastMessage = '';
const {
title, durationCustom, duration } = this.data;
if (message) {
toastMessage = message;
}else {
toastMessage = title;
}
this.setData({
hidden: false,
title: toastMessage
});
if (toast_timer) {
clearTimeout(toast_timer);
}
let durationValue = duration;
if (!durationCustom) {
// 根据提示信息设置动画时间，最小1s,最大5s
durationValue = 5;
let accurateValue = title.length * 0.06 + 0.5;
durationValue = (durationValue > accurateValue ? accurateValue : durationValue) * 1000;
if (durationValue < 1000) {
durationValue = 1000;
}
}
const me = this;
toast_timer = setTimeout(() => {
me.hideToast();
toast_timer = null;
}, durationValue);
},
hideToast: function() {
this.setData({
hidden: true,
});
},
doNothing: function () {
//阻止点击事件渗透
},
}
})
toast.wxml ps:这里目前只写了默认提示，预留了其他情况提示坑位
<view class='toastMask' hidden='{
{hidden}}' catchtap='hideToast' catchtouchmove='doNothing' catchlongtap='doNothing'>
<view class='toastBody {
{textPosition}}' catchtap='doNothing'>
<block wx:if='{
{toastType === "default"}}'>
<rich-text class='toast_content_text' nodes="{
{title}}"></rich-text>
</block>
<block wx:elif='{
{toastType === "success"}}'>
<!--暂未实现 -->
</block>
<block wx:elif='{
{toastType === "warning"}}'>
<!--暂未实现 -->
</block>
<block wx:elif='{
{toastType === "error"}}'>
<!--暂未实现 -->
</block>
<block wx:elif='{
{toastType === "loading"}}'>
<!--暂未实现 -->
</block>
</view>
</view>
toast.wxss
.toastMask {
position: fixed;
width: 100%;
height: 100%;
top: 0rpx;
left: 0rpx;
z-index: 1314;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.toastBody {
max-width: 70%;
background: rgba(0, 0, 0, 0.7);
border-radius: 20rpx;
padding: 10px 18px;
}
.toast_content_text {
width: 100%;
height: 100%;
color: white;
font-size: 24rpx;
text-align: center;
}
.left{
text-align: left;
}
.center{
text-align: center;
}
.right{
text-align: right;
}
toast.json
{
"component": true,
"usingComponents": {
}
}
以上就是组件的全部代码！组件的引用在app.json中全局引用，无需每个文件引用。