更新记录

1.0.2（2024-08-02） 下载此版本

修正文挡中错误

1.0.1（2024-08-02） 下载此版本

优化组件

1.0.0（2024-08-02） 下载此版本

新增

平台兼容性

hbxw-timeline组件

介绍

支持ui自定义的时间轴面板展示组件

使用示例

推荐先直接复制示例代码到工程中看效果了解下使用方法再投入项目使用。

<template>
    <view>
    <text class="title">基础使用</text>
        <hbxw-timeline :list="list" @click="click"></hbxw-timeline>

    <text class="title">自定义配置</text>
    <hbxw-timeline :list="list" pointSize="30rpx">
      <template #tag="{item, index}">
        <view class="tag-wrap">{{index}}:{{item.tag}}</view>
      </template>

      <template #pointer="{pointBg,pointSize, index}">
        <view :style="{width: pointSize, height: pointSize,backgroundColor:pointBg}" class="point">{{index}}</view>
      </template>

      <template #content="{item, index}">
        <view class="content">{{index}}:{{item.content}}</view>
      </template>
    </hbxw-timeline>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [
          {
            tag: '今从通给名毛却主水别。',
            date: '2027/08/01 16:18',
            content: '专军下照想实必并由标红许办书话加油术置政而消反调特际改种始金老到么本且己感向节么两结调安层半位近研难统到看史且定角观制果机米具型种调受便信她太无毛要角物多装给完状将四并须深住已更车习断心表格场正前了到。'
          },
          {
            tag: '今从',
            date: '2027/08/02 16:18',
            content: '专军下照想实必并由标红许办书话加油术置政而消反调特际改种始金老到么本且己感向节么两结调安层半位近研难统到看史且定角观制果机米具型种调受便信她太无毛要角物多装给完状将四并须深住已更车习断心表格场正前了到。'
          },
          {
            tag: '名毛却主水别。',
            date: '2027/08/02 18:16',
            content: '专军下照想实必并由标红许办书话加油术置政而消反调特际改种始金老到么本且己感向节么两结调安层半位近研难统到看史且定角观制果机米具型种调受便信她太无毛要角物多装给完状将四并须深住已更车习断心表格场正前了到。'
          },
          {
            tag: '今从通给名毛却主水别。',
            date: '2027/08/02 18:18',
            content: '专军下'
          },
        ]
            }
        },
        methods: {
            click(type, item) {
        console.log('---- click ----:', type, item);
      }
        }
    }
</script>

<style>
.title{
  font-size: 32rpx;
  font-weight: bold;
  padding: 10px;
}
.tag-wrap{
  width: 168rpx;
  padding: 0 20rpx;
}
.content{
  padding: 10px 20rpx;
}
.point{
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
</style>

API

Props

Event

注：包体积偏大是因为有示例图片,真正会打包到项目中的体积是很小的