微信小程序toast组件解决wx.showToast文本最多显示两行问题

创建toast组件

 index.wxmi

1.  
   <!--components/toast/index.wxml-->
2.  
   <cover-view wx:if="{{show}}" class="toast {{type==='confirm' ? 'confirm' : ''}} {{show === null ? '' : show?'fadeIn':'fadeDown'}} {{mask?'toast-mask':''}}">
3.  
   <cover-view class="toast-container">
4.  
   <!-- <cover-view wx:if="{{closeButton}}" bindtap="confirmCallback" class="toast-close">
5.  
   <image class="close_image" mode="widthFix" src="https://web.czb365.com/ty/fleet-xcx/close_icon.png"></image>
6.  
   </cover-view> -->
7.  
   <cover-view wx:if="{{type === 'success'}}">success</cover-view>
8.  
   <cover-view wx:if="{{type === 'fail'}}">fail</cover-view>
9.  
   <!-- cover-view 内文字在IOS 被遮挡截取显示不全的问题
10.  
    解决：在文字后面添加一个全角空格 就能解决该问题 -->
11.  
    <cover-view wx:if="{{message}}" class="toast-message">{{message}}　</cover-view>
12.  
    <cover-view wx:if="{{tip}}" class="toast-message-tip">{{tip}}</cover-view>
13.  
    <cover-view wx:if="{{type === 'confirm'}}" class="confrim_button">
14.  
    <cover-view class="confirm-left" data-value="{{0}}" bindtap="confirmCallback">取消</cover-view>
15.  
    <cover-view class="confirm-right" data-value="{{1}}" bindtap="confirmCallback">确认</cover-view>
16.  
    </cover-view>
17.  
    </cover-view>
18.  
    </cover-view>

index.less

1.  
   /* components/toast/index.wxss */
2.  
   .toast {
3.  
   position: fixed;
4.  
   top: 0;
5.  
   left: 0;
6.  
   right: 0;
7.  
   bottom: 0;
8.  
   display: flex;
9.  
   z-index: 10000;
10.  
    align-items: center;
11.  
    justify-content: center;
12.  
    opacity: 0;
13.  
    visibility: hidden;
14.  
    }
15.  
    .toast-mask {
16.  
    /* background: rgba(0, 0, 0, 0.5) */
17.  
    }
18.  
    .toast.confirm .toast-container {
19.  
    padding: 0;
20.  
    padding-top: 52rpx;
21.  
    }
22.  
    .toast-message {
23.  
    white-space: normal !important;
24.  
    line-height: 40rpx !important;
25.  
    }
26.  
    .toast.confirm .toast-message,
27.  
    .toast.confirm .toast-message-tip {
28.  
    padding: 0 28rpx;
29.  
    }
30.  
    .toast.confirm .toast-message-tip {
31.  
    padding-bottom: 52rpx;
32.  
    }
33.  
    .toast-container {
34.  
    position: relative;
35.  
    background: #505050;
36.  
    border-radius: 20rpx;
37.  
    max-width: 80%;
38.  
    padding: 39rpx 60rpx;
39.  
    z-index: 1001;
40.  
    box-sizing: border-box;
41.  
    overflow: hidden;
42.  
    font-size: 28rpx;
43.  
    font-weight: 400;
44.  
    color: #ffffff;
45.  
    line-height: 40rpx;
46.  
    white-space: pre-wrap;
47.  
    }
48.  
    @keyframes aniIn {
49.  
    0% {
50.  
    opacity: 0;
51.  
    visibility: visible;
52.  
    }
53.  
    100% {
54.  
    opacity: 1;
55.  
    visibility: visible;
56.  
    }
57.  
    }
58.  
    @keyframes aniDown {
59.  
    0% {
60.  
    opacity: 1;
61.  
    visibility: visible;
62.  
    }
63.  
    100% {
64.  
    opacity: 0;
65.  
    visibility: hidden;
66.  
    }
67.  
    }
68.  
    .fadeDown {
69.  
    animation: aniDown 0.2s linear;
70.  
    animation-fill-mode: forwards;
71.  
    }
72.  
    .fadeIn {
73.  
    animation: aniIn 0.2s linear;
74.  
    animation-fill-mode: forwards;
75.  
    }
76.  
    .toast-close {
77.  
    position: absolute;
78.  
    top: 28rpx;
79.  
    right: 28rpx;
80.  
    }
81.  
    .toast-close .close_image {
82.  
    width: 48rpx;
83.  
    height: 48rpx;
84.  
    }
85.  
    .toast-message-tip {
86.  
    font-size: 30rpx;
87.  
    font-weight: 400;
88.  
    color: #262626;
89.  
    line-height: 40rpx;
90.  
    margin-top: 28rpx;
91.  
    text-align: center;
92.  
    white-space: pre-wrap;
93.  
    }
94.  
    .confrim_button {
95.  
    display: flex;
96.  
    flex-direction: row;
97.  
    align-items: center;
98.  
    justify-content: space-between;
99.  
    padding: 0 88rpx 48rpx 88rpx;
100.  
     }
101.  
     .confrim_button .confirm-left,
102.  
     .confrim_button .confirm-right {
103.  
     height: 70rpx;
104.  
     line-height: 70rpx;
105.  
     width: 200rpx;
106.  
     border-radius: 35rpx;
107.  
     border: 2rpx solid #c2c2c2;
108.  
     text-align: center;
109.  
     color: #565656;
110.  
     box-sizing: border-box;
111.  
     }
112.  
     .confrim_button .confirm-right {
113.  
     color: #ffffff;
114.  
     border: none;
115.  
     background: linear-gradient(270deg, #ff743b 0%, #ff312a 100%);
116.  
     }

index.json

1.  
   {
2.  
   "component": true,
3.  
   "usingComponents": {}
4.  
   }

index.ts

1.  
   // components/toast/index.js
2.  
   Component({
3.  
   /**
4.  
   * 组件的属性列表
5.  
   */
6.  
   properties: {
7.  
   mask: {
8.  
   type: Boolean,
9.  
   value: true,
10.  
    },
11.  
    show: {
12.  
    type: null,
13.  
    value: null,
14.  
    },
15.  
    duration: {
16.  
    type: Number,
17.  
    value: 2000,
18.  
    },
19.  
    message: {
20.  
    type: String,
21.  
    value: "",
22.  
    },
23.  
    tip: {
24.  
    type: String,
25.  
    value: "",
26.  
    },
27.  
    type: {
28.  
    type: String,
29.  
    value: "text",
30.  
    },
31.  
    closeButton: {
32.  
    type: Boolean,
33.  
    value: true,
34.  
    },
35.  
    className: {
36.  
    type: String,
37.  
    value: "",
38.  
    },
39.  
    },
40.  
     
41.  
    /**
42.  
    * 组件的初始数据
43.  
    */
44.  
    data: {},
45.  
     
46.  
    /**
47.  
    * 组件的方法列表
48.  
    */
49.  
    methods: {},
50.  
    });

toast.js

1.  
   let defaultOptions = {
2.  
   type: "text",
3.  
   mask: true,
4.  
   message: "",
5.  
   show: true,
6.  
   duration: 2000,
7.  
   selector: "#toast",
8.  
   closeButton: true,
9.  
   callback: null,
10.  
    tip: "",
11.  
    className: "",
12.  
    };
13.  
     
14.  
    function getContext() {
15.  
    const pages = getCurrentPages();
16.  
    return pages[pages.length - 1];
17.  
    }
18.  
     
19.  
    function isObj(message) {
20.  
    return message !== null && typeof message === "object"
21.  
    ? message
22.  
    : { message };
23.  
    }
24.  
     
25.  
    let queue = [];
26.  
     
27.  
    function Toast(currentOption) {
28.  
    let options = Object.assign({}, defaultOptions, isObj(currentOption));
29.  
    let context = getContext();
30.  
     
31.  
    let toast = context.selectComponent(options.selector);
32.  
    if (!toast) {
33.  
    console.error(
34.  
    "未找到 toast 节点, 请确认 selector 及 context 是否正确, 检查页面是否引入toast组件！"
35.  
    );
36.  
    return;
37.  
    }
38.  
     
39.  
    toast.clear = (e) => {
40.  
    toast.setData({ show: false });
41.  
    };
42.  
    toast.confirmCallback = (e) => {
43.  
    clearTimeout(toast.timer);
44.  
    toast.clear();
45.  
    toast.setData({ show: false });
46.  
    options.callback && options.callback(e.target.dataset.value);
47.  
    };
48.  
    queue.push(toast);
49.  
    toast.setData(options);
50.  
     
51.  
    clearTimeout(toast.timer);
52.  
    if (options.duration > 0) {
53.  
    toast.timer = setTimeout(() => {
54.  
    toast.clear();
55.  
    options.callback && options.callback();
56.  
    queue = queue.filter((item) => item !== toast);
57.  
    }, options.duration);
58.  
    }
59.  
    return toast;
60.  
    }
61.  
     
62.  
    const createMethod = (type) => (options) =>
63.  
    Toast(Object.assign({}, isObj(type), isObj(options)));
64.  
     
65.  
    Toast.success = createMethod("success");
66.  
    Toast.fail = createMethod("fail");
67.  
    Toast.confirm = createMethod({
68.  
    type: "confirm",
69.  
    closeButton: false,
70.  
    duration: 0,
71.  
    });
72.  
    Toast.loading = (message) => {
73.  
    wx.showLoading({
74.  
    title: message || "加载中...",
75.  
    mask: true,
76.  
    });
77.  
    };
78.  
    Toast.loading.clear = () => {
79.  
    wx.hideLoading();
80.  
    };
81.  
     
82.  
    Toast.clear = () => {
83.  
    queue.forEach((toast) => {
84.  
    toast.clear();
85.  
    });
86.  
    queue = [];
87.  
    };
88.  
     
89.  
    export default Toast;

使用

index.json

index.wxml

<toast id="toast"></toast>

 index.ts

1.  
   import Toast from "../../../components/toast/toast.js";
2.  
   Toast({
3.  
   message: "券面值过大，建议券面值与使用门槛的比例小于等于0.4",
4.  
   });

 效果

这篇好文章是转载于：学新通技术网