更新记录

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

优化组件

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

更新使用示例

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

优化说明文挡

平台兼容性

uni-app

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示例