自定义小程序中的showToast

对于小程序自己提供的showToast,大家是不是觉得挺好用的,但是当我们遇到需要提示的信息字数较多时,因为小程序中showToast默认只能显示7个字体长度,因此对于多余的字数会隐藏,这样是不是很烦恼,所以我们就自己定义一个弹出框解决这个问题。
1.在pages文件里面新建一个toast文件夹自定义小程序中的showToast_第1张图片
2.在list.wxml中的代码

``
    
{{title}}
确定

`javascript

3.在list.wxss中的代码

```.toast-out {
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 9999;
    width: 65%;
    /* height: 20%; */
  }
  .toast-out .toast-in {
    padding: 6px;
    text-align: center;
    color: white;
    border-radius: 8px;
    margin-top: -6%;
  }

3.在需要使用的页面进行引入

    `

在上面代码里面,title表示弹出框要显示的内容,isShow的值是一个布尔值,表示是否显示弹出框
4.要在引用页面的wxss中引入弹出框的样式文件list.wxss

import '弹出框文件样式文件的相对路径

6.在引入文件的.js文件中定义弹出框需要的数据

title:'',
isShow:false

最终结果

你可能感兴趣的:(小程序)