更新记录

1.0.5（2025-07-22） 下载此版本

增加isOnly来实现当只有一项内容的时候也能正常展示

1.0.4（2025-07-05） 下载此版本

优化组件

1.0.3（2025-06-26） 下载此版本

更新使用示例

平台兼容性

云端兼容性

uni-app(4.06)

hbxw-timeaxis 时间轴式列表展示组件

介绍

高度可配置，内容可定义的时间轴式列表展示组件。支持自定义样式、自定义内容，适用于各种时间轴展示场景。

使用示例

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

<template>
    <view class="test-timeline">
    <view class="hbxw-timeaxis-title">基础使用示例</view>
    <view class="hbxw-timeaxis-container">
      <hbxw-timeaxis>
        <hbxw-timeaxis-item 
          :isFirst="index === 0" 
          :isLast="index === list.length - 1" 
          v-for="(item, index) in list" 
          :item="item" 
          :key="index"
        ></hbxw-timeaxis-item>
      </hbxw-timeaxis>
    </view>

    <view class="hbxw-timeaxis-title">通过配置修改样式</view>
    <view class="hbxw-timeaxis-container">
      <hbxw-timeaxis>
        <hbxw-timeaxis-item 
          :isFirst="index === 0" 
          :isLast="index === list.length - 1" 
          v-for="(item, index) in list" 
          :item="item" 
          :key="index"
          point-bd-color="yellow"
          point-color="blue"
          point-width="20rpx"
          line-style="solid"
          line-color="grey"
          title-color="red"
          right-color="grey"
          :sub-title-style="{color: 'green', fontSize: '28rpx'}"
          :title-ellipsis="false"
        >
        </hbxw-timeaxis-item>
      </hbxw-timeaxis>
    </view>

    <view class="hbxw-timeaxis-title">通过slot自定义内容</view>
    <view class="hbxw-timeaxis-container">
      <hbxw-timeaxis>
        <hbxw-timeaxis-item 
          :isFirst="index === 0" 
          :isLast="index === list.length - 1" 
          v-for="(item, index) in list" 
          :item="item" 
          :key="index"
        >
          <template #point="{item}">
            <view class="custom-point">{{index + 1}}</view>
          </template>
          <template #title="{item}">
            <view>title:{{item.title}}</view>
          </template>
          <template #right="{item}">
            <view>right:{{item.date}}</view>
          </template>
          <template #other="{item}">
            <view>subTitle:{{item.subTitle}}</view>
          </template>
        </hbxw-timeaxis-item>
      </hbxw-timeaxis>
    </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [
          {
            title: '从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜',
            date: '2024-12-10 18:14',
            subTitle: '1234567890'
          },{
            title: '一起飞向天',
            date: '2024-12-10 18:14',
            subTitle: '9874563210'
          },{
            title: '从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜加油努力冲冲冲',
            date: '2024-12-10 18:14',
            subTitle: '9874563210'
          }
        ]
            }
        },
        methods: {

        }
    }
</script>

<style scoped>
.test-timeline{
  width: 100%;
}
.hbxw-timeaxis-title{
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 10px;
}
.hbxw-timeaxis-container{
  width: 680rpx;
  margin:20rpx auto;
}
.custom-point{
  width: 32rpx;
  height: 32rpx;
  background-color: #ff6b6b;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20rpx;
  margin-right: 10rpx;
}
</style>

API

Props

Slots

注意事项

• 在支付宝小程序端，如果使用了一个插槽，默认的插槽内容不会展示，需要通过插槽来实现所有内容
• 如果使用了自定义插槽point，需要传入pointWidth和subTitleStyle用于调整布局，详情查看上面的slot示例
• 使用isFirst、isLast和isOnly属性可以正确控制时间轴连接线的显示
• 组件内部使用CSS变量实现样式定制，支持多种颜色和尺寸的自定义
• 如果需要更复杂的自定义样式，可以通过插槽完全自定义内容