微信小程序WeUI Toptips使用和封装改进（可解决navigationStyle值为custom时位置靠上的问题）
WeUI介绍：
WeUI是微信官方团队设计的拓展组件库，最大的特点是支持扩展库引入，不占用小程序包体积。
官方文档链接
使用原生组件:
第一次使用需要配置 app.json 文件引入组件库。在 app.json 中添加配置项
1
2
3
4
5
| {
"useExtendedLib": {
"weui": true
}
}
|
使用Toptips
Toptips文档链接
在 page.json 或 app.json 中添加配置项
提示：在 page.json 中添加时 page 这个页面可以使用， app.json 添加时所有页面都可以使用
1
2
3
4
5
| {
"usingComponents": {
"mp-toptips": "weui-miniprogram/toptips/toptips"
}
}
|
1
2
|
<mp-toptips msg="{{error}}" type="error" show="{{error}}"></mp-toptips>
|
1
2
3
4
5
6
7
8
9
10
11
|
Page({
data: {
error: ''
},
onShow() {
this.setData({
error: '这是一个错误提示'
})
}
});
|
会出现的问题：
使用不方便
在使用官方组件时，用两个变量分别表示 msg 和 type ，很多情况 type 的值并不是固定的，在一个页面中即要显示成功的消息也要显示失败的消息。这样就被迫要在改变 msg 的值的同时改变 type 的值，还要在 data 中添加 type 属性，对于经常要用的情况非常不方便。
1
2
3
4
| this.setData({
msg: '这是一条提示',
type: 'error'
})
|
隐藏导航栏使用自定义导航栏时Toptips在顶部显示
出现这个问题的情况还是比较少的，但是非常影响显示，需要手动去进行改为绝对定位（导航栏的高度不固定，需要动态获取），非常麻烦。
解决方案：
对原生 Toptips 进行封装，把原来的 msg 属性改为三种不同状态的 msg ，对 Toptips 根元素设置 top 值，子元素继承。
封装后的代码
1
2
|
<mp-toptips msg="{{msg}}" type="{{typeName}}" show="{{show}}" delay="{{delay}}" ext-class="{{navBarHeight?'^toptip':''}}" style="top: {{navBarHeight}}px;"></mp-toptips>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
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)
},
}
})
|
1
2
3
4
|
.toptip{
top: inherit;
}
|
