欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

小程序里的alert,Toast

程序员文章站 2022-06-10 14:54:03
前言: 在小程序中的弹框写法和我们在外面直接用是不一样的,他不支持alert,但是有替代的弹框组件目录:一、原生小程序:原生小程序api:二、vant中的提示框(官网入口)vant-api:一、原生小程序:wx.showToast({ title: '签到成功', //弹框内容 icon: 'success', //弹框模式 duration: 2000 //弹框显示时间})原生小程序api:wx.showTo......

前言:

      在小程序中的弹框写法和我们在外面直接用是不一样的,他不支持alert,但是有替代的弹框组件

目录:

一、原生小程序:

原生小程序api:

二、vant中的提示框(官网入口)

vant-api:


一、原生小程序:

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.jsonindex.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