小程序里的alert,Toast
程序员文章站
2022-06-10 14:54:03
前言: 在小程序中的弹框写法和我们在外面直接用是不一样的,他不支持alert,但是有替代的弹框组件目录:一、原生小程序:原生小程序api:二、vant中的提示框(官网入口)vant-api:一、原生小程序:wx.showToast({ title: '签到成功', //弹框内容 icon: 'success', //弹框模式 duration: 2000 //弹框显示时间})原生小程序api:wx.showTo......
前言:
在小程序中的弹框写法和我们在外面直接用是不一样的,他不支持alert,但是有替代的弹框组件
目录:
一、原生小程序:
wx.showToast({
title: '签到成功', //弹框内容
icon: 'success', //弹框模式
duration: 2000 //弹框显示时间
})
原生小程序api:
wx.showToast(Object object)
显示消息提示框
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
title | string | 是 | 提示的内容 | ||
icon | string | 'success' | 否 | 图标 | |
image | string | 否 | 自定义图标的本地路径,image 的优先级高于 icon | 1.1.0 | |
duration | number | 1500 | 否 | 提示的延迟时间 | |
mask | boolean | false | 否 | 是否显示透明蒙层,防止触摸穿透 | |
success | function | 否 | 接口调用成功的回调函数 | ||
fail | function | 否 | 接口调用失败的回调函数 | ||
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
object.icon 的合法值
值 | 说明 | 最低版本 |
---|---|---|
success | 显示成功图标,此时 title 文本最多显示 7 个汉字长度 | |
loading | 显示加载图标,此时 title 文本最多显示 7 个汉字长度 | |
none | 不显示图标,此时 title 文本最多可显示两行,1.9.0及以上版本支持 |
二、vant中的提示框(官网入口)
1、在app.json
或index.json
中引入组件,详细介绍见快速上手
"usingComponents": {
"van-toast": "@vant/weapp/toast/index"
}
2、在js文件中引入toast
import Toast from 'path/to/@vant/weapp/dist/toast/toast';
3、在页面上加入
<van-toast id="van-toast" />
4、在js中使用
Toast('我是提示文案,建议不超过十五字~');
vant-api:
方法
方法名 | 参数 | 返回值 | 介绍 |
---|---|---|---|
Toast | options | message |
toast 实例 | 展示提示 |
Toast.loading | options | message |
toast 实例 | 展示加载提示 |
Toast.success | options | message |
toast 实例 | 展示成功提示 |
Toast.fail | options | message |
toast 实例 | 展示失败提示 |
Toast.clear | clearAll |
void |
关闭提示 |
Toast.setDefaultOptions | options |
void |
修改默认配置,对所有 Toast 生效 |
Toast.resetDefaultOptions | - | void |
重置默认配置,对所有 Toast 生效 |
Options
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
type | 提示类型,可选值为 loading success fail html
|
string | text |
- |
position | 位置,可选值为 top middle bottom
|
string | middle |
- |
message | 内容 | string | '' |
- |
mask | 是否显示遮罩层 | boolean | false |
- |
forbidClick | 是否禁止背景点击 | boolean | false |
- |
loadingType | 加载图标类型, 可选值为 spinner
|
string | circular |
- |
zIndex | z-index 层级 | number | 1000 |
- |
duration | 展示时长(ms),值为 0 时,toast 不会消失 | number | 2000 |
- |
selector | 自定义选择器 | string | van-toast |
- |
context | 选择器的选择范围,可以传入自定义组件的 this 作为上下文 | object | 当前页面 | - |
onClose | 关闭时的回调函数 | Function | - | - |
Slot
名称 | 说明 |
---|---|
- | 自定义内容 |
到此结束
本文地址:https://blog.csdn.net/qq_41619796/article/details/109240734
上一篇: 设计模式的五大原则