分享开发经验瓜分5000元大奖，聊聊#我写代码那些年#的故事

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

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

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

今日原生自定义组件《线型进度条》

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

用法

<!-- page.ttml 引用页面的ttml文件 -->
<gu-progress percent="100" striped stripedActive= active-color="#2979ff" />

{
    "usingComponents": {
        "gu-progress": "/components/g-ui/line-progress/line-progress"
    }
}

属性列表

源码一览

<!-- ttml 组件结构 -->
<view class="gu-line-progress"
    style="border-radius:{{round?'100rpx':0}};height:{{tool.heightFormat(height)}};background-color:{{inactiveColor}}">
    <view class="active {{striped?'striped':''}} {{striped&&stripedActive?'striped-active':''}}"
        style="width:{{percent}}%;background-color:{{activeColor}}">
        <view tt:if="{{showPercent}}">{{percent}}%</view>
    </view>
</view>

<sjs module="tool">
    function isNumber(h) {
        return typeof h === "number";
    }
    function heightFormat(h) {
        if (isNumber(h)) return h + "px";
        else return h.replace(/\d+/g, "") ? h : (h + "px");
    }
    module.exports = {
        heightFormat: heightFormat
    }
</sjs>

/* ttss 组件样式文件 */
.gu-line-progress {
  width: 100%;
  height: 15px;
  overflow: hidden;
}

.gu-line-progress .active {
  display: flex;
  width: 0;
  height: 100%;
  font-size: 20rpx;
  color: #ffffff;
  align-items: center;
  justify-items: flex-end;
  justify-content: space-around;
  transition: all 0.4s ease;
}

.gu-line-progress .striped {
  background-image: linear-gradient(45deg, transparent 50%, #ffffff26 50%, #ffffff26 75%, transparent 75%, transparent);
  background-size: 39px 39px;
}

.gu-line-progress .striped-active {
  animation: progress-stripes 2s linear infinite;
}

@keyframes progress-stripes {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 39px 0;
  }
}

下载

一、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-progress percent="100" striped="{{true}}" stripedActive="{{true}}" active-color="#2979ff" />

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