时间轴

entry/src/main/ets/views/Time.ets

@@ -2,84 +2,73 @@ interface DList {
   id:number
   textContent:string
   time:string
-  icon:Resource
-  isPassed:Boolean
-  isCurrent:Boolean
+  icon?:Resource
+  isPassed?:Boolean  //如果需要图片，以及滑动到当前需要放大启用
+  isCurrent?:Boolean
 }
 @Component
 export struct Time {
   @State list:DList[] = [
     {
       id: 1,
-      textContent: '当列表项高度（宽度）超出屏幕高度（宽度）时，列表可以沿垂直（水平)方向滚动。在页面内容很多时，若用户需快速定位，可拖拽滚动条，如下图所示。当列表项高度（宽度）超出屏幕高度（宽度）时，列表可以沿垂直（水平)方向滚动。在页面内容很多时，若用户需快速定位，可拖拽滚动条，如下图所示。',
+      textContent: '当列表项高度（宽度沿垂直（水平)方向滚动。在页面内容很多时，若用户需快速定位，可拖拽滚动条，如下图所示。',
       time:'15:01',
-      icon:$r('app.media.icon'),
-      isPassed:true,
-      isCurrent:false
     },
     {
       id: 2,
-      textContent: '当列表项高度（宽度）超出屏幕高度（宽度）时，列表可以沿垂直（水平)方向滚动。',
+      textContent: '当列表。',
       time:'15:02',
-      icon:$r('app.media.icon'),
-      isPassed:false,
-      isCurrent:true
     },
     {
       id: 3,
-      textContent: '当列表项高度（宽度）超出屏幕高度（宽度）时，列表可以沿垂直（水平)方向滚动。在页面内容很多时，若用户需快速定位，可拖拽滚动条，如下图所示。当列表项高度（宽度）超出屏幕高度（宽度）时，列表可以沿垂直（水平)方向滚动。在页面内容很多时，若用户需快速定位，可拖拽滚动条，如下图所示。',
+      textContent: '当列表项高度（宽度）超出屏幕高度（宽度）时，列表可以沿垂直（水平)时，列表可以沿垂直。',
       time:'15:03',
-      icon:$r('app.media.icon'),
-      isPassed:false,
-      isCurrent:false
     },
     {
       id: 4,
-      textContent: '当列表项高度（宽度）超出屏幕高度（宽度）时，列表可以沿垂直（水平)方向滚动。',
+      textContent: '当列表项高度',
       time:'15:04',
-      icon:$r('app.media.icon'),
-      isPassed:false,
-      isCurrent:false
+
     },
     {
       id: 5,
-      textContent: '当列表项高度（宽度）超出屏幕高度（宽度）时，列表可以沿垂直（水平)方向滚动。',
+      textContent: '当列表项高度（宽',
       time:'15:04',
-      icon:$r('app.media.icon'),
-      isPassed:false,
-      isCurrent:false
     },
     {
       id: 6,
-      textContent: '当列表项高度（宽度）超出屏幕高度（宽度）时，列表可以沿垂直（水平)方向滚动。',
+      textContent: '当列表项高度（宽度）超出。',
       time:'15:04',
-      icon:$r('app.media.icon'),
-      isPassed:false,
-      isCurrent:false
+
+
     },
     {
       id: 7,
-      textContent: '当列表项高度（宽度）超出屏幕高度（宽度）时，列表可以沿垂直（水平)方向滚动。',
+      textContent: '当列表项高度（宽度）超出屏幕',
       time:'15:04',
-      icon:$r('app.media.icon'),
-      isPassed:false,
-      isCurrent:false
     },
   ]
+  aboutToAppear(): void {
+    //TODO：
+    //计算笔记的开始时间再开始排序
+  }
   @State listLength:Number = this.list.length;
   build() {
     Column(){
       List(){
         ForEach(this.list,(item:DList)=>{
           ListItem(){
-            Column(){
-              Row(){
-                Image(item.isPassed || item.isCurrent? $r('app.media.icon') : $r('app.media.icon'))
-                  .width(item.isCurrent?16:10)
-                  .height(item.isCurrent?16:10)
+            Column({space:20}){
+              Row({space:5}){
+                Column(){
+
+                 }.backgroundColor(Color.White)
+                .borderRadius('50%')
+                  .width(15)
+                  .height(15)
                   .margin({right:item.isCurrent?8:5})
                 Text(item.time)
-              }.margin({left:item.isCurrent?-8:-5})
+              }.margin(-8)
               Column(){
                 Row(){
                   Text(){
@@ -92,14 +81,15 @@ export struct Time {
                 }
                 .padding({left:10})
               }
-              .border({width:{left:item.id == this.listLength ? 0 : 1 },color:item.isPassed?'#e3bbbb':'#dddddd'})
+              .height(100)
+              .border({width:{left:item.id == this.listLength ? 0 : 1 },color:'#dddddd'})
             }
             .alignItems(HorizontalAlign.Start)
             .width('80%')
             .margin({bottom:10})
           }
         })
-      }.alignListItem(ListItemAlign.Center)
+      }.alignListItem(ListItemAlign.Center).scrollBar(BarState.Off)
     }
   }
 }