为社区贡献高颜值的原生自定义组件(g-ui)的第6天：顶部提示

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

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

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

今日自定义组件：《顶部提示》

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

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

基本使用

1. 首先可以通过设置 type 属性来修改提示类型，该属性有五个可选值：primary、success、error、warning、info（默认）
2. 默认情况下提示是被 隐藏 的，如果要让这个提示消息展示出来，则需要先获取到这个组件实例，我们可以监听组件的 ref 自定义方法来完成绑定（没有使用平台默认的ref方式是为了迁移到其他平台的便利性）
3. 直接调用组件实例下的 show 方法即可显示提示

<gu-top-tip type="success" title="成功了" bind:ref="topTipRefHandler" />

//对应页面的js文件
const topTipRef = null;
Page({
  topTipRefHandler({ detail }){
    topTipRef = detail;
    //在恰当的时机调用 topTipRef.show() 即可显示提示
  },
  
  //假设这是一个按钮点击函数
  tip(){
  	topTipRef.show(); //顶部提示弹出，默认2.5s后销毁
	}
})

提示内容

从上面可以看到我们可以通过修改 title 属性来设置提示内容，除此之外还可以在组件 插槽 中放入元素，就像下面这样：

<gu-top-tip type="success" bindref="topTipRefHandler">
    <gu-icon name="good-fill" color="#ffffff" size="28rpx" />已赞
</gu-top-tip>

使用图标

除了在插槽中放入图标，基本类型的提示也都有自己的图标，只需要简单地将 showIcon 属性设置为 true 即可展示基本类型(success、error、warning、info)的图标

<gu-top-tip show-icon type="error" title="失败了" />

持续时间

通过修改 duration 属性即可，单位为 毫秒 ，默认为2500（即2.5s）

<gu-top-tip show-icon type="warning" title="请稍后再试" duration="{{1500}}" />

自定义导航栏保持顶部

如果使用了 自定义导航栏 ，gu-top-tip的定位可能不准确，届时可以将导航栏的高度设置到 customNavigationBarHeight 这一属性上来修正定位(如果没有css单位则使用 px 作为单位）

<gu-top-tip type="success" customNavigationBarHeight="100px">成功了</gu-top-tip>

属性列表

事件列表

下载

一、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-top-tip>这是提示信息</gu-top-tip>

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