当前位置 : 主页 > 编程语言 > 其它开发 >

微信小程序WeUI Toptips使用和封装改进(可解决navigationStyle值为custom时位置靠上的

来源:互联网 收集:自由互联 发布时间:2022-06-30
WeUI介绍: WeUI是微信官方团队设计的拓展组件库,最大的特点是支持扩展库引入,不占用小程序包体积。 官方文档链接 使用原生组件: 第一次使用需要配置 app.json 文件引入组件库。在
WeUI介绍:

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


使用原生组件:

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

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

Toptips文档链接
page.jsonapp.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: '这是一个错误提示'
        })
    }
});

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

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

    this.setData({
      msg: '这是一条提示',
      type: 'error'
    })
隐藏导航栏使用自定义导航栏时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>
// 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;
}
网友评论