赞
踩
WeUI是微信官方团队设计的拓展组件库,最大的特点是支持扩展库引入,不占用小程序包体积。
官方文档链接
第一次使用需要配置 app.json
文件引入组件库。在 app.json
中添加配置项
{
"useExtendedLib": {
"weui": true
}
}
Toptips文档链接
在 page.json
或 app.json
中添加配置项
提示:在
page.json
中添加时page
这个页面可以使用,app.json
添加时所有页面都可以使用
{
"usingComponents": {
"mp-toptips": "weui-miniprogram/toptips/toptips"
}
}
<!--WXML示例代码-->
<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
进行封装,把原来的 msg
属性改为三种不同状态的 msg
,对 Toptips
根元素设置 top
值,子元素继承。
<!--WXML代码-->
<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;
}
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。