如何让WeUI Toptips在自定义导航下优雅飘落？

2026-04-11 12:521阅读0评论SEO基础

内容介绍
文章标签
相关推荐

本文共计700个文字，预计阅读时间需要3分钟。

WeUI介绍：WeUI是微信官方团队设计的UI组件库，支持扩展库引入，不占用小程序包体积。官方文档链接：使用原生组件：首次使用需配置app.json文件，引入组件库。

WeUI介绍：

WeUI是微信官方团队设计的拓展组件库，最大的特点是支持扩展库引入，不占用小程序包体积。
官方文档链接

使用原生组件:

第一次使用需要配置 app.json 文件引入组件库。在 app.json 中添加配置项

{ "useExtendedLib": { "weui": true } } 使用Toptips

Toptips文档链接
在 page.json 或 app.json 中添加配置项

提示：在 page.json 中添加时 page 这个页面可以使用， app.json 添加时所有页面都可以使用

{ "usingComponents": { "mp-toptips": "weui-miniprogram/toptips/toptips" } }

 <mp-toptips msg="{{error}}" type="error" show="{{error}}"></mp-toptips>

// page.js示例代码 Page({ data: { error: '' }, onShow() { this.setData({ error: '这是一个错误提示' }) } });

会出现的问题：使用不方便

在使用官方组件时，用两个变量分别表示 msg 和 type ，很多情况 type 的值并不是固定的，在一个页面中即要显示成功的消息也要显示失败的消息。这样就被迫要在改变 msg 的值的同时改变 type 的值，还要在 data 中添加 type 属性，对于经常要用的情况非常不方便。

this.setData({ msg: '这是一条提示', type: 'error' }) 隐藏导航栏使用自定义导航栏时Toptips在顶部显示

出现这个问题的情况还是比较少的，但是非常影响显示，需要手动去进行改为绝对定位（导航栏的高度不固定，需要动态获取），非常麻烦。

解决方案：代码托管地址：gitee

对原生 Toptips 进行封装，把原来的 msg 属性改为三种不同状态的 msg ，对 Toptips 根元素设置 top 值，子元素继承。

封装后的代码

 <mp-toptips msg="{{msg}}" type="{{typeName}}" show="{{show}}" delay="{{delay}}" ext-class="{{navBarHeight?'^toptip':''}}" style="top: {{navBarHeight}}px;"></mp-toptips>

// js代码 Component({ properties: { errorMsg: { type: String, value: '' }, successMsg: { type: String, value: '' }, infoMsg: { type: String, value: '' }, delay: { type: Number, value: 2000 }, navBarHeight: { type: Number, value: 0 } }, data: { show: false, msg: '', typeName: 'error' }, methods: { setMsg(type, value) { if (value) this.setData({ show: true, msg: value, typeName: type }) } }, observers: { errorMsg: function (value) { this.setMsg('error',value) }, successMsg: function (value) { this.setMsg('success',value) }, infoMsg: function (value) { this.setMsg('info',value) }, } })

/* css代码 */ .toptip{ top: inherit; }

标签：微信小程序 weui Toptips