fs-weapp/toast

Toast 轻提示

使用指南

在 app.json 或 index.json 中引入Toast组件

{
  "usingComponents": {
    "fs-toast": "path/components/Toast/index"
  }
}
1
2
3
4
5

如若需要在js中直接调用，需要js中引入

import Dialog from 'path/components/toast/toast'
1

同时需要在wxml中

<fs-toast id="fs-toast" />
1

代码演示

文字提示

Toast('提示内容')
Toast('这是一条长文字提示，超过一定字数就会换行')
1
2

加载提示

 Toast.loading({ mask: true, message: '加载中...' })
1

其他提示

 Toast.success('成功文案')
 Toast.fail('失败提示')
 Toast.warning('警示文案')
1
2
3

高级用法

  const text = second => `倒计时 ${second} 秒`
  const toast = Toast.loading({
    duration: 0,
    forbidClick: true,
    loadingType: 'spinner',
    message: text(3)
  })

  let second = 3
  const timer = setInterval(() => {
    second--
    if (second) {
      toast.setData({ message: text(second) })
    } else {
      clearInterval(timer)
      Toast.clear()
    }
  }, 1000)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

方法

方法名 参数 返回值 说明
Toast options Toast示例 展示提示
Toast.loading options Toast示例 展示加载提示
Toast.success options Toast示例 展示成功提示
Toast.fail options Toast示例 展示失败提示
Toast.warning options Toast示例 展示警示提示
Toast.clear 关闭提示

参数

参数 说明 类型 默认值
type 提示类型,可选值为 loading success fail warning String text
message 提示内容 String -
mask 是否展示遮罩层 Boolean false
forbidClick 是否禁止背景点击 Boolean false
selector 自定义选择器 String #fs-toast
loadingType 当type为loading时的loading样式 String circular
position 位置 String middle
duration 动画周期 Number 3000
zIndex 层级 Number 1000
show 是否显示 Boolean true

属性

参数 说明 类型 默认值
type 提示类型,可选值为 loading success fail warning String text
message 提示内容 String -
mask 是否展示遮罩层 Boolean false
forbidClick 是否禁止背景点击 Boolean false
loadingType 当type为loading时的loading样式 String circular
position 位置 String middle
duration 动画周期 Number 3000
zIndex 层级 Number 1000
show 是否显示 Boolean true

← Notify 消息通知 →