为社区贡献高颜值的原生自定义组件(g-ui)的第7天：公告通知栏

Flag: 坚持为社区贡献高颜值原生自定义组件！🎉🎉🎉

Motive: 在遇到问题的时候得到过很多朋友的耐心回答和讲解，所以也希望能为社区做点贡献！🌈🌈🌈

Introduce: 非常高兴和大家在这里相遇，喜欢写代码，非常欢迎社区的朋友与我交流！🚀🚀🚀

此版本的bug：在执行npm构建的时候sjs文件会丢失，已经向官方反馈此bug。当前可以手动将node_modules/@cellent/g-ui目录下的 sjs文件夹 复制到miniprogram_npm/@cellent/g-ui目录下

今日自定义组件：《公告通知栏》

先来看下该组件的效果，需要的小伙伴可以滚动至文章末尾获取组件。

实际动画效果比下面的gif要快1倍左右

关于滚动速度与展示持续时间

gu-notice组件在通知项目过长的时候会通过 滚动动画 来展示项目内容，在组件内部 非常精确 地计算了每个项目滚动应该花费的时间来确保所有不同长度的项目都以 相同的速度 滚动。

若需要修改项目滚动的速度可以通过传入 speed 参数来控制，这个参数有5个可选值：slower、slow、default（默认）、fast、faster（从左到右速度越来越快）

展示持续时长相关：

关于每个通知项目的展示时长，gu-notice对两类项目有不同的控制方法：

不滚动的项目 ：默认持续展示5秒后切换下一个项目，通过 duration 参数控制（单位毫秒）

滚动的项目 ：默认完整滚动一次后切换，通过 scrollTimes 参数控制 （默认为1）

基本使用

通过传入 messages 属性来设置通知的项目，该属性需要一个数组，数组的每个元素都应该是一个包含 content 及 label 的对象，其中label为可选属性，代表通知项目前面的 标签内容 ；content属性为 通知的内容 ，如果项目内容过长将会 自动 开启 滚动动画

<gu-notice messages="{{msgs}}" />

//对应页面的js文件
Page({
  data: {
    msgs: [
      {
        label: "李商隐",
        content: "春蚕到死丝方尽，蜡炬成灰泪始干。"
      },
      {
        label: "李白",
        content: "《早发白帝城》朝辞白帝彩云间，千里江陵一日还。两岸猿声啼不尽，轻舟已过万重山。"
      },
    ]
  }
})

设置类型

gu-notice同样支持设置 type 属性来改变通知的类型，该属性有六个可选值：default（默认）、primary、success、error、warning、info，并且可以传入 icon 属性来控制是否显示 默认图标 ：

<gu-notice icon type="error" messages="{{errMsg}}" />
<gu-notice type="success" messages="{{okMsg}}" />

//对应页面的js文件
Page({
  data: {
    okMsg: [{
      label: "通知",
      content: "新版本成功修复了bug，特此通知！"
    }],
    errMsg: [{
      label: "错误",
      content: "旧版本存在错误，特此通知！"
    }]
  }
})

添加元素

gu-notice组件留置了一个 插槽位置 ，在图标和标签的中间，这里我们可以放入一些自定义的元素，比如放一个图片：

<gu-notice messages="{{msgs}}" label-color="#dd587e">
    <view style="height:100%;padding: 4px 0;">
        <image style="height:100%" mode="heightFix" src="/images/notify.png" />
    </view>
</gu-notice>

//对应页面的js文件
Page({
  data: {
    msgs:[{
      label:"最新",
      content:"换季打折处理：全场所有商品1折起！"
    }]
  }
})

属性列表

下载

一、Github: https://github.com/lianggaoqiang/g-ui

Git拉取到的默认是项目源码，其中ts文件未编译，若使用typescript开发则可以直接引用，js开发则不能直接使用，这种情况有三种解决方案：

1. 修改项目根目录下的project.config.json文件内的setting.useCompilerPlugins为["typescript"]并重启项目，具体可查看文档：Typescript支持
2. 使用tsc指令编译项目内所有ts文件
3. 使用下方的npm方式下载g-ui

二、npm: https://www.npmjs.com/package/@cellent/g-ui

npm install @cellent/g-ui

1. 对下载下来的g-ui包进行构建，此步骤若不明白，可以查看文档：npm支持：构建npm
2. 在需要使用的页面引入该组件（组件的显示参考“基本使用”部分）

<!-- page.ttml 引用页面的ttml文件 -->
<gu-notice messages="{{msgs}}" />

{
    "usingComponents": {
        "gu-notice": "ext://@cellent/g-ui/notice"
    }
}