微信小程序WeUI Toptips使用和封装改进（可解决navigationStyle值为custom时位置靠上的问题）_微信小程序 weui mp-toptips 宽度为0

WeUI介绍：

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

---

使用原生组件:

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

{
  "useExtendedLib": {
    "weui": true
  }
}
1
2
3
4
5

使用Toptips

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

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

{
  "usingComponents": {
    "mp-toptips": "weui-miniprogram/toptips/toptips"
  }
}
1
2
3
4
5

<!--WXML示例代码-->
<mp-toptips msg="{{error}}" type="error" show="{{error}}"></mp-toptips>
1
2

// page.js示例代码
Page({
    data: {
        error: ''
    },
    onShow() {
        this.setData({
            error: '这是一个错误提示'
        })
    }
});
1
2
3
4
5
6
7
8
9
10
11

---

会出现的问题：

使用不方便

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

    this.setData({
      msg: '这是一条提示',
      type: 'error'
    })
1
2
3
4

隐藏导航栏使用自定义导航栏时Toptips在顶部显示

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

---

解决方案：

代码托管地址：gitee

对原生 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>
1
2

// 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)
    },
  }
})
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

/* css代码 */
.toptip{
  top: inherit;
}
1
2
3
4