TimeBar 横向时间轴

横向时间轴组件一般用于地图的时间维度上的信息展示

右侧model无法滚动，请移步到横向时间轴演示 (opens new window)

基本使用

以下为示例代码

<template>
	<view class="bottom">
		<u-time-bar @change="changeTime" :date="date" :theme="theme" :bgColorList="bgColorList" :interval="interval" :item-width="width" :time-height="timeHeight" :isContinued="isContinued"></u-time-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				theme: "normal", //适老化
				date: [new Date(2022, 2, 22, 1, 0), new Date(2022, 2, 30, 0, 0)], //时间数组
				width: "240",
				timeHeight: '80',
				interval: 500,
				isContinued: false,
				time: {},
				bgColorList: ['rgba(63, 61, 80, 0.5)', 'rgba(0, 0, 0, 0.5)']
			}
		}
	}
</script>

<style lang="scss" scoped>
.bottom {
    width: 100vw;
    position: fixed;
    left: 0;
    bottom: 0;
}
</style>

API

TiemLimeItem Props

参数	说明	类型	默认值	可选值
theme	主题模式，普通模式normal，关怀模式care	String	normal	care
interval	时间间隔	Number	1000	-
itemWidth	时间轴单个的长度，单位rpx	String|Number	320	-
timeHeight	时间轴的高度，单位rpx	String|Number	80	-
date	开始时间和结束时间，格式可以通过new Date()，或者使用yyyy-MM-dd hh:mm 格式。组件只支持精确到小时。	Array	[moment().subtract(7, 'd').format('yyyy-MM-DD HH:00'), moment().format('yyyy-MM-DD HH:00')]	-
isContinued	是否开启实时监听，并且在@change时返回	Boolean	false	true
bgColorList	时间轴的背景色，使用两个颜色交替。	Array	['rgba(63, 61, 80, 0.76)', 'rgba(0, 0, 0, 0.63)']	[]
safe-area-inset-bottom	是否开启底部安全区适配	Boolean	true	false

Events

事件名	说明	回调参数	版本
change	时间改变时候触发	index：当前下标，索引从0开始。time：当前时间文本,格式为yyyy-MM-dd hh:mm，timestamp：当前时间戳。	-