当前位置:   article > 正文

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

微信小程序 weui mp-toptips 宽度为0

WeUI介绍:

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


使用原生组件:

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

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

使用Toptips

Toptips文档链接
page.jsonapp.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

会出现的问题:

使用不方便

在使用官方组件时,用两个变量分别表示 msgtype ,很多情况 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
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/黑客灵魂/article/detail/775254
推荐阅读
相关标签
  

闽ICP备14008679号