developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
陈剑华
da8bab30 1 parent 14ee30c7

feat: 滑动卡片样式

Inline Side-by-side
Showing 4 changed files with 49 additions and 16 deletions
@@ -54,8 +54,7 @@ export struct ZhSingleRow02 { @@ -54,8 +54,7 @@ export struct ZhSingleRow02 {
54 54
55 resetEdgeAnimation() { 55 resetEdgeAnimation() {
56 if (this.moreWidth > this.initMoreWidth) { 56 if (this.moreWidth > this.initMoreWidth) {
57 - this.moreWidth = this.moreWidth - 1  
58 - this.resetEdgeAnimation(); 57 + this.moreWidth = 16
59 } 58 }
60 this.resetMoreTips() 59 this.resetMoreTips()
61 } 60 }
@@ -92,6 +91,13 @@ export struct ZhSingleRow02 { @@ -92,6 +91,13 @@ export struct ZhSingleRow02 {
92 }) 91 })
93 } 92 }
94 if (this.compDTO.operDataList.length >= 2) { 93 if (this.compDTO.operDataList.length >= 2) {
  94 + Row() {
  95 + Ellipse()
  96 + .width(2* (this.moreWidth - this.initMoreWidth - 1))
  97 + .height('100%')
  98 + .fill(0xe9e9e9)
  99 + .position({ left: -(this.moreWidth - this.initMoreWidth - 3) * 0.8 , top: 0 })
  100 +
95 Column() { 101 Column() {
96 if (this.moreWidth > this.initMoreWidth + 2) { 102 if (this.moreWidth > this.initMoreWidth + 2) {
97 Text(this.moreTips) 103 Text(this.moreTips)
@@ -103,10 +109,12 @@ export struct ZhSingleRow02 { @@ -103,10 +109,12 @@ export struct ZhSingleRow02 {
103 .justifyContent(FlexAlign.Center) 109 .justifyContent(FlexAlign.Center)
104 .align(Alignment.Center) 110 .align(Alignment.Center)
105 .height('100%') 111 .height('100%')
106 - .width(this.moreWidth) 112 + .width(this.initMoreWidth)
107 .backgroundColor(0xe9e9e9) 113 .backgroundColor(0xe9e9e9)
108 .borderRadius({ topLeft: 5, bottomLeft: 5 }) 114 .borderRadius({ topLeft: 5, bottomLeft: 5 })
109 } 115 }
  116 + .margin({left: 1.5 * (this.moreWidth - this.initMoreWidth)})
  117 + }
110 } 118 }
111 } 119 }
112 .width(CommonConstants.FULL_WIDTH) 120 .width(CommonConstants.FULL_WIDTH)
@@ -78,8 +78,7 @@ export struct ZhSingleRow03 { @@ -78,8 +78,7 @@ export struct ZhSingleRow03 {
78 78
79 resetEdgeAnimation() { 79 resetEdgeAnimation() {
80 if (this.moreWidth > this.initMoreWidth) { 80 if (this.moreWidth > this.initMoreWidth) {
81 - this.moreWidth = this.moreWidth - 1  
82 - this.resetEdgeAnimation(); 81 + this.moreWidth = 16
83 } 82 }
84 this.resetMoreTips() 83 this.resetMoreTips()
85 } 84 }
@@ -167,6 +166,13 @@ export struct ZhSingleRow03 { @@ -167,6 +166,13 @@ export struct ZhSingleRow03 {
167 }) 166 })
168 } 167 }
169 if (this.compDTO.operDataList.length >= 2) { 168 if (this.compDTO.operDataList.length >= 2) {
  169 + Row() {
  170 + Ellipse()
  171 + .width(2* (this.moreWidth - this.initMoreWidth - 1))
  172 + .height(116)
  173 + .fill(0xf9f9f9)
  174 + .position({ left: -(this.moreWidth - this.initMoreWidth - 3) * 0.8 , top: 0 })
  175 +
170 Column() { 176 Column() {
171 if (this.moreWidth > this.initMoreWidth + 2) { 177 if (this.moreWidth > this.initMoreWidth + 2) {
172 Text(this.moreTips) 178 Text(this.moreTips)
@@ -177,10 +183,12 @@ export struct ZhSingleRow03 { @@ -177,10 +183,12 @@ export struct ZhSingleRow03 {
177 } 183 }
178 .justifyContent(FlexAlign.Center) 184 .justifyContent(FlexAlign.Center)
179 .align(Alignment.Center) 185 .align(Alignment.Center)
180 - .width(this.moreWidth) 186 + .height(116)
  187 + .width(this.initMoreWidth)
181 .backgroundColor(0xf9f9f9) 188 .backgroundColor(0xf9f9f9)
182 .borderRadius({ topLeft: 5, bottomLeft: 5 }) 189 .borderRadius({ topLeft: 5, bottomLeft: 5 })
183 - .height(116) 190 + }
  191 + .margin({left: 1.5 * (this.moreWidth - this.initMoreWidth)})
184 } 192 }
185 } 193 }
186 } 194 }
@@ -43,8 +43,7 @@ export struct HorizontalStrokeCardThreeTwoRadioForMoreComponent { @@ -43,8 +43,7 @@ export struct HorizontalStrokeCardThreeTwoRadioForMoreComponent {
43 43
44 resetEdgeAnimation() { 44 resetEdgeAnimation() {
45 if (this.moreWidth > this.initMoreWidth) { 45 if (this.moreWidth > this.initMoreWidth) {
46 - this.moreWidth = this.moreWidth - 1  
47 - this.resetEdgeAnimation(); 46 + this.moreWidth = 16
48 } 47 }
49 this.resetMoreTips() 48 this.resetMoreTips()
50 } 49 }
@@ -141,7 +140,15 @@ export struct HorizontalStrokeCardThreeTwoRadioForMoreComponent { @@ -141,7 +140,15 @@ export struct HorizontalStrokeCardThreeTwoRadioForMoreComponent {
141 }) 140 })
142 }) 141 })
143 } 142 }
144 - if (this.compDTO.operDataList.length > 2) { 143 +
  144 + if (this.compDTO.operDataList.length >= 2) {
  145 + Row() {
  146 + Ellipse()
  147 + .width(2* (this.moreWidth - this.initMoreWidth - 1))
  148 + .height(this.compDTO.operDataList.length == 2 ? 180 : 146)
  149 + .fill(0xf1f3f4)
  150 + .position({ left: -(this.moreWidth - this.initMoreWidth - 3) * 0.8 })
  151 +
145 Column() { 152 Column() {
146 if (this.moreWidth > this.initMoreWidth + 2) { 153 if (this.moreWidth > this.initMoreWidth + 2) {
147 Text(this.moreTips) 154 Text(this.moreTips)
@@ -152,10 +159,12 @@ export struct HorizontalStrokeCardThreeTwoRadioForMoreComponent { @@ -152,10 +159,12 @@ export struct HorizontalStrokeCardThreeTwoRadioForMoreComponent {
152 } 159 }
153 .justifyContent(FlexAlign.Center) 160 .justifyContent(FlexAlign.Center)
154 .align(Alignment.Center) 161 .align(Alignment.Center)
155 - .width(this.moreWidth) 162 + .height(this.compDTO.operDataList.length == 2 ? 180 : 146)
  163 + .width(this.initMoreWidth)
156 .backgroundColor(0xf1f3f4) 164 .backgroundColor(0xf1f3f4)
157 .borderRadius({ topLeft: 5, bottomLeft: 5 }) 165 .borderRadius({ topLeft: 5, bottomLeft: 5 })
158 - .height(this.compDTO.operDataList.length == 2 ? 180 : 146) 166 + }
  167 + .margin({left: 1.5 * (this.moreWidth - this.initMoreWidth)})
159 } 168 }
160 } 169 }
161 } 170 }
@@ -53,8 +53,7 @@ export struct LiveHorizontalCardComponent { @@ -53,8 +53,7 @@ export struct LiveHorizontalCardComponent {
53 53
54 resetEdgeAnimation() { 54 resetEdgeAnimation() {
55 if (this.moreWidth > this.initMoreWidth) { 55 if (this.moreWidth > this.initMoreWidth) {
56 - this.moreWidth = this.moreWidth - 1  
57 - this.resetEdgeAnimation(); 56 + this.moreWidth = 16
58 } 57 }
59 this.resetMoreTips() 58 this.resetMoreTips()
60 } 59 }
@@ -166,6 +165,13 @@ export struct LiveHorizontalCardComponent { @@ -166,6 +165,13 @@ export struct LiveHorizontalCardComponent {
166 }) 165 })
167 } 166 }
168 if (this.compDTO.operDataList.length >= 2) { 167 if (this.compDTO.operDataList.length >= 2) {
  168 + Row() {
  169 + Ellipse()
  170 + .width(2* (this.moreWidth - this.initMoreWidth - 1))
  171 + .height(this.compDTO.operDataList.length == 2 ? 180 : 146)
  172 + .fill(0xf1f3f4)
  173 + .position({ left: -(this.moreWidth - this.initMoreWidth - 3) * 0.8 })
  174 +
169 Column() { 175 Column() {
170 if (this.moreWidth > this.initMoreWidth + 2) { 176 if (this.moreWidth > this.initMoreWidth + 2) {
171 Text(this.moreTips) 177 Text(this.moreTips)
@@ -176,10 +182,12 @@ export struct LiveHorizontalCardComponent { @@ -176,10 +182,12 @@ export struct LiveHorizontalCardComponent {
176 } 182 }
177 .justifyContent(FlexAlign.Center) 183 .justifyContent(FlexAlign.Center)
178 .align(Alignment.Center) 184 .align(Alignment.Center)
179 - .width(this.moreWidth) 185 + .height(this.compDTO.operDataList.length == 2 ? 180 : 146)
  186 + .width(this.initMoreWidth)
180 .backgroundColor(0xf1f3f4) 187 .backgroundColor(0xf1f3f4)
181 .borderRadius({ topLeft: 5, bottomLeft: 5 }) 188 .borderRadius({ topLeft: 5, bottomLeft: 5 })
182 - .height(this.compDTO.operDataList.length == 2 ? 180 : 146) 189 + }
  190 + .margin({left: 1.5 * (this.moreWidth - this.initMoreWidth)})
183 } 191 }
184 } 192 }
185 } 193 }