更新记录

1.0.3（2025-12-08） 下载此版本

• 组件内部集成了 scroll-view，支持滚动到指定元素
• 新增 scrollIntoView 属性，支持自动滚动定位

1.0.2（2023-11-17） 下载此版本

style: dot样式微调

1.0.1（2023-11-06） 下载此版本

文档参数更正

平台兼容性

uni-app(4.85)

zero-timeline

一. 插件说明

个人仅测试与vue2,vue3,微信小程序，其他平台请自行测试

二. 使用方法

符合easycom组件模式, 导入 uni_modules 后直接使用即可

基础用法

<template>
    <view class="container">
        <view class="wrap">
            <zero-timeline :dataList='dataList' gap='30px'></zero-timeline>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                dataList:[]
            }
        },
        created(){
            this.init()
        },
        methods: {
            init(){
                for(let i=0;i<10;i++){
                    const obj = {
                        id: `item${i}`, // 唯一标识，用于 scrollIntoView
                        // time: `2023-11-1${i}`,
                        title: `feat:这是标题${i}`,
                        content: `完成功能完成功能完成功能完成功能`,
                        sub: `补充内容`,
                        leftTime:`2023-11-1${i}`,
                        leftTitle: `11月1${i}日`,
                        leftContent: `开始\n|\n结束`,
                        color: '#11998e',
                    }
                    this.dataList.push(obj)
                }
            }
        }
    }
</script>

高级用法 - 滚动定位

<template>
    <view class="container">
        <view class="wrap">
            <zero-timeline 
                :dataList='dataList' 
                gap='30px'
                :scrollIntoView="scrollToId">
            </zero-timeline>
        </view>
        <view class="footer-btns">
            <button @click="scrollToTop">回到顶部</button>
            <button @click="scrollToTarget">滚动到指定位置</button>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                dataList:[],
                scrollToId: ''
            }
        },
        methods: {
            scrollToTop() {
                this.scrollToId = '';
                setTimeout(() => {
                    this.scrollToId = this.dataList[0].id;
                }, 100);
            },
            scrollToTarget() {
                this.scrollToId = '';
                setTimeout(() => {
                    this.scrollToId = 'item5'; // 滚动到 id 为 item5 的元素
                }, 100);
            }
        }
    }
</script>

三. 参数说明

四. dataList 参数说明

以下dataList参数均为非必填,根据需求自由组合即可

五. 注意事项

1. scrollIntoView 使用方法：需要先将其设置为空字符串，然后再设置目标 id，才能触发滚动

   this.scrollToId = '';
   setTimeout(() => {
      this.scrollToId = 'targetId';
   }, 100);

2. 组件高度：组件内部使用了 scroll-view，父容器需要设置固定高度或使用 flex: 1

插件预览:

小程序搜索: 零技术

预览的小程序不一定能及时更新当前插件