• 消息提示 Message
    • 基本使用
      • 示例代码(第一种用法)
      • 示例代码(第二种用法)
    • 显示消息
      • 示例代码
    • 消息内容
      • 示例代码
    • 提示类型
      • 示例代码
    • 消息提示时长
    • 消息图标
      • 示例代码
    • 消息提示属性(Message Attributes)

    消息提示 Message

    用于主动操作后的消息反馈。

    基本使用

    Message组件有以下两种用法:

    • 常规组件的使用方式,通过更改传入的属性值来控制Message的显示和隐藏。

    • wx.lin.showMessage(object),使用wx.lin.showMessag的调用时,与组件的使用一致,需要在json文件中引入组件,且在wxml中写入Message组件。

    wx.lin.showMessage接受的参数是个对象,里面包含了与消息提示相关的属性。

    TIP

    第一种用法小程序基础库版本 2.6.1 开始支持。

    示例代码(第一种用法)

    1. <!-- wxml -->
    2. <l-button bind:lintap="showMessage">操作</l-button>
    3. <l-message content="{{content}}"/>
    1. // js
    2. showMessage(){
    3. this.setData({
    4. show:true,
    5. content:'消息提示'
    6. })
    7. }

    示例代码(第二种用法)

    1. <l-message />
    // js
    showMessage(){
        wx.lin.showMessage({
            content:'消息提示'
        })
    }
    

    显示消息

    通过设置show属性为true显示消息(第一种用法使用该属性)。

    示例代码

    <!-- wxml -->
    <l-button bind:lintap="showMessage">操作</l-button>
    <l-message content="{{content}}"/>
    
    // js
    showMessage(){
        this.setData({
            show:true,
            content:'消息提示'
        })
    }
    

    消息内容

    通过content属性设置消息提示的内容,此处文字建议不超过十个。

    提示类型

    示例代码

    // js
    showMessage(){
        wx.lin.showMessage({
            content:'内容'
        })
    }
    

    提示类型

    通过type属性设置为primarysuccesswarningerror创建不同类型的消息提示。默认值为primary

    提示类型

    示例代码

    // js
    showMessage(){
        wx.lin.showMessage({
            type:'success',
            content:'内容'
        })
    }
    

    消息提示时长

    通过duration属性设置消息提示时长。默认值为1500ms

    // js
    showMessage(){
        wx.lin.showMessage({
            duration:4000,
            content:'内容'
        })
    }
    

    消息图标

    通过icon属性设置消息内的图标的名称。默认图标为对应type的图标,当type为primary 时无图标。

    通过image属性设置消息文字前的自定义图片。通过l-image-class属性可更改自定义图片的样式。

    示例代码

    // js
    showMessage(){
        wx.lin.showMessage({
            type:'error',
            duration:4000,
            icon:'warning',
            content:'内容'
        })
    }
    

    消息提示属性(Message Attributes)

    参数说明类型可选值默认值
    show显示与隐藏消息Boolean——fasle
    content消息内容String———-
    type消息提示类型Stringprimary/warning/success/errorprimary
    duration消息显示的时长Number——1500
    icon消息图标String——type
    image消息前的自定义图片String———-
    success消息调用成功后的回调函数Function———-
    l-class覆盖消息区域自定义外部样式类String———-—-
    l-image-class覆盖消息前自定义图片的自定义外部样式类String———-