Vant Weapp 的 Notify 是一个用于在页面顶部展示消息提示的轻量级组件。它比 wx.showToast 更适合需要自定义样式、控制显示位置或同时展示多条提示的场景。使用前需要确保已经引入 Vant Weapp 组件库，基础流程并不复杂，但细节决定了最终体验。
这个组件默认从顶部滑出，占据状态栏下方区域，支持成功、警告、错误等多种类型。以下先说明如何在页面中快速把它跑起来。
快速上手：引入与基础调用
第一步，在页面的 JSON 配置文件中声明要使用的组件。如果你的项目已经通过 npm 安装了 Vant Weapp，并且在小程序开发者工具中构建过 npm，可以直接这样写：
{
"usingComponents": {
"van-notify": "@vant/weapp/notify/index"
}
}
第二步，在页面的 WXML 中放置组件节点，并给它设置一个 id。这个 id 是后续在 JS 中获取组件实例的关键。通常建议放在页面根节点内部靠前的位置：
<view class="page"> <van-notify id="van-notify" /> <button bind:tap="onSave">保存</button> </view>
第三步，在对应的 JS 文件中通过 selectComponent 获取 Notify 实例并调用 show 方法。例如保存成功后提示用户：
Page({
onSave() {
const notify = this.selectComponent('#van-notify');
notify.show({
type: 'success',
message: '保存成功',
duration: 2000
});
}
});
上面这段代码中，type 控制提示类型，message 是显示的文本，duration 表示多少毫秒后自动关闭。如果不传 duration，组件会停留更久，需要手动调用 clear。这种调用方式和传统 wx.showToast 很相似，但控制力更强。
有一点需要特别注意：selectComponent 的 id 必须和 WXML 中的 id 完全一致，否则拿到的可能是 null，后续调用就会报错。另外，在页面初始化完成后再调用比较稳妥，例如放在用户交互的回调中，而不是 onLoad 的最顶部直接执行。
进阶配置：属性、方法与样式定制
Notify 的常用属性包括 type、message、duration、color、background、selector、safe-area-inset-top 和 z-index。其中 color 和 background 可以直接设置文字颜色和背景色，适合需要品牌色或强调色提示的场景。例如想展示一条橙色背景的警告信息：
notify.show({
type: 'warning',
message: '网络连接不稳定',
color: '#ffffff',
background: '#ff9500',
duration: 3000
});
如果页面上同时存在多个 Notify 实例，可以通过 selector 区分。默认情况下，selectComponent 使用 id 选择器，但你也可以在 show 方法中传入 selector 来指定具体实例。这个特性适合复杂页面中不同区域需要独立提示的情况。不过要注意，多个实例同时显示时可能会叠加，需要合理控制调用顺序。
除了方法传参，组件本身还支持一些外部样式类来定制外观。Vant Weapp 通常提供 custom-class 和 custom-style，你可以在页面或组件中针对 van-notify 的内部结构覆盖样式。例如想改变提示条的圆角和阴影，可以这样写：
.custom-notify {
border-radius: 8px !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
然后在 WXML 中传入：
<van-notify id="van-notify" custom-class="custom-notify" />
这种方式比直接修改组件源码更安全，也便于后续升级。如果只是临时调整某个提示的样式，也可以在 show 时通过 custom-style 属性动态传入一个样式字符串，不过这种方式书写 CSS 时要注意转义问题，一般建议使用类名方式。
另外，z-index 属性可以控制提示条在其他普通组件之上的层级。默认值通常是 110，如果你的页面有弹窗、导航栏等固定在顶部的元素，可能需要手动调高 Notify 的层级，以确保它能显示在这些元素上方。但请记住，小程序的 map、video 等原生组件层级较高，单纯的 z-index 无法覆盖它们，这点会在下文常见问题中进一步说明。
常见问题与避坑指南
第一个常见问题是“为什么 Notify 显示时被挡住了”。如果页面上存在自定义导航栏或者使用 position: fixed 的公告栏，并且它们的层级高于 Notify，提示条就会被遮住。此时可以给 Notify 设置更高的 z-index，同时检查其他固定元素的层级设置。如果是被原生组件遮挡，例如页面中放了 map 或 video，那么无论怎么设置 z-index 都不起作用，因为原生组件在旧版本小程序中总是浮在普通组件之上。解决方案是在这些场景下避免在原生组件正上方弹出 Notify，或者换用 cover-view 做提示。
第二个问题是“在自定义组件中调用 Notify 时拿不到实例”。自定义组件内部使用 selectComponent 时，查找范围默认只包含当前组件自身的节点，不会跨越组件边界。如果你把 van-notify 放在页面中，而在某个子组件里调用 this.selectComponent('#van-notify')，很可能返回 null。解决办法有两种：一是在子组件中通过 this.getPageInstance() 获取页面实例再调用，二是把 Notify 也放在子组件内部，并设置合适的样式隔离策略。需要注意的是，如果组件使用了样式隔离，Notify 的外部样式可能无法传入，这时要在组件配置中开启 addGlobalClass 或者用全局样式覆盖。
第三个问题是“连续调用 show 后提示条重叠或显示异常”。Notify 内部并没有默认的队列机制，如果在一条提示还未消失时再次调用 show，组件会重新执行显示动画，但旧内容可能还没有清除，导致视觉上出现叠影。推荐的方案是每次调用 show 前先调用 clear 方法，或者在业务逻辑中维护一个状态防止重复触发。例如在请求完成后，先判断是否已有提示实例正在显示，再决定是否调用新提示。
第四个问题是“自定义样式时怎么确定内部类名”。Vant Weapp 的组件结构可能会随着版本变化而调整，直接写死内部类名有风险。更稳妥的方式是使用组件暴露的 custom-class 或 custom-style 属性，它们会添加到组件根节点上，这样既能覆盖部分样式，又不会因为内部 DOM 结构变动而失效。如果你确实需要修改内部节点，建议查看当前版本源码中的 externalClasses 定义，找出可以安全使用的外部样式类。
最后，真机调试时可能出现和开发者工具中不同的表现，例如动画卡顿、顶部留白不一致等。这通常与机型的安全区有关，Notify 默认会处理顶部安全区，但在部分安卓设备上需要手动调整 safe-area-inset-top 属性。遇到这类问题时，先确认组件版本是否最新，再检查页面全局的 page 样式是否影响了布局。
