更新记录

1.0.0（2024-12-12） 下载此版本

新增组件

平台兼容性

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"
          line-style="solid"
          line-color="grey"
          title-color="red"
          right-color="grey"
          sub-title-color="grey"
          :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 #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;
}
</style>

API

Props