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 90 additions and 57 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,20 +91,29 @@ export struct ZhSingleRow02 { @@ -92,20 +91,29 @@ export struct ZhSingleRow02 {
92 }) 91 })
93 } 92 }
94 if (this.compDTO.operDataList.length >= 2) { 93 if (this.compDTO.operDataList.length >= 2) {
95 - Column() {  
96 - if (this.moreWidth > this.initMoreWidth + 2) {  
97 - Text(this.moreTips)  
98 - .fontSize(8)  
99 - .fontColor(0x858585)  
100 - .width(8) 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 +
  101 + Column() {
  102 + if (this.moreWidth > this.initMoreWidth + 2) {
  103 + Text(this.moreTips)
  104 + .fontSize(8)
  105 + .fontColor(0x858585)
  106 + .width(8)
  107 + }
101 } 108 }
  109 + .justifyContent(FlexAlign.Center)
  110 + .align(Alignment.Center)
  111 + .height('100%')
  112 + .width(this.initMoreWidth)
  113 + .backgroundColor(0xe9e9e9)
  114 + .borderRadius({ topLeft: 5, bottomLeft: 5 })
102 } 115 }
103 - .justifyContent(FlexAlign.Center)  
104 - .align(Alignment.Center)  
105 - .height('100%')  
106 - .width(this.moreWidth)  
107 - .backgroundColor(0xe9e9e9)  
108 - .borderRadius({ topLeft: 5, bottomLeft: 5 }) 116 + .margin({left: 1.5 * (this.moreWidth - this.initMoreWidth)})
109 } 117 }
110 } 118 }
111 } 119 }
@@ -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,20 +166,29 @@ export struct ZhSingleRow03 { @@ -167,20 +166,29 @@ export struct ZhSingleRow03 {
167 }) 166 })
168 } 167 }
169 if (this.compDTO.operDataList.length >= 2) { 168 if (this.compDTO.operDataList.length >= 2) {
170 - Column() {  
171 - if (this.moreWidth > this.initMoreWidth + 2) {  
172 - Text(this.moreTips)  
173 - .fontSize(8)  
174 - .fontColor(0x858585)  
175 - .width(8) 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 +
  176 + Column() {
  177 + if (this.moreWidth > this.initMoreWidth + 2) {
  178 + Text(this.moreTips)
  179 + .fontSize(8)
  180 + .fontColor(0x858585)
  181 + .width(8)
  182 + }
176 } 183 }
  184 + .justifyContent(FlexAlign.Center)
  185 + .align(Alignment.Center)
  186 + .height(116)
  187 + .width(this.initMoreWidth)
  188 + .backgroundColor(0xf9f9f9)
  189 + .borderRadius({ topLeft: 5, bottomLeft: 5 })
177 } 190 }
178 - .justifyContent(FlexAlign.Center)  
179 - .align(Alignment.Center)  
180 - .width(this.moreWidth)  
181 - .backgroundColor(0xf9f9f9)  
182 - .borderRadius({ topLeft: 5, bottomLeft: 5 })  
183 - .height(116) 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,21 +140,31 @@ export struct HorizontalStrokeCardThreeTwoRadioForMoreComponent { @@ -141,21 +140,31 @@ export struct HorizontalStrokeCardThreeTwoRadioForMoreComponent {
141 }) 140 })
142 }) 141 })
143 } 142 }
144 - if (this.compDTO.operDataList.length > 2) {  
145 - Column() {  
146 - if (this.moreWidth > this.initMoreWidth + 2) {  
147 - Text(this.moreTips)  
148 - .fontSize(8)  
149 - .fontColor(0x858585)  
150 - .width(8) 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 +
  152 + Column() {
  153 + if (this.moreWidth > this.initMoreWidth + 2) {
  154 + Text(this.moreTips)
  155 + .fontSize(8)
  156 + .fontColor(0x858585)
  157 + .width(8)
  158 + }
151 } 159 }
  160 + .justifyContent(FlexAlign.Center)
  161 + .align(Alignment.Center)
  162 + .height(this.compDTO.operDataList.length == 2 ? 180 : 146)
  163 + .width(this.initMoreWidth)
  164 + .backgroundColor(0xf1f3f4)
  165 + .borderRadius({ topLeft: 5, bottomLeft: 5 })
152 } 166 }
153 - .justifyContent(FlexAlign.Center)  
154 - .align(Alignment.Center)  
155 - .width(this.moreWidth)  
156 - .backgroundColor(0xf1f3f4)  
157 - .borderRadius({ topLeft: 5, bottomLeft: 5 })  
158 - .height(this.compDTO.operDataList.length == 2 ? 180 : 146) 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,20 +165,29 @@ export struct LiveHorizontalCardComponent { @@ -166,20 +165,29 @@ export struct LiveHorizontalCardComponent {
166 }) 165 })
167 } 166 }
168 if (this.compDTO.operDataList.length >= 2) { 167 if (this.compDTO.operDataList.length >= 2) {
169 - Column() {  
170 - if (this.moreWidth > this.initMoreWidth + 2) {  
171 - Text(this.moreTips)  
172 - .fontSize(8)  
173 - .fontColor(0x858585)  
174 - .width(8) 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 +
  175 + Column() {
  176 + if (this.moreWidth > this.initMoreWidth + 2) {
  177 + Text(this.moreTips)
  178 + .fontSize(8)
  179 + .fontColor(0x858585)
  180 + .width(8)
  181 + }
175 } 182 }
  183 + .justifyContent(FlexAlign.Center)
  184 + .align(Alignment.Center)
  185 + .height(this.compDTO.operDataList.length == 2 ? 180 : 146)
  186 + .width(this.initMoreWidth)
  187 + .backgroundColor(0xf1f3f4)
  188 + .borderRadius({ topLeft: 5, bottomLeft: 5 })
176 } 189 }
177 - .justifyContent(FlexAlign.Center)  
178 - .align(Alignment.Center)  
179 - .width(this.moreWidth)  
180 - .backgroundColor(0xf1f3f4)  
181 - .borderRadius({ topLeft: 5, bottomLeft: 5 })  
182 - .height(this.compDTO.operDataList.length == 2 ? 180 : 146) 190 + .margin({left: 1.5 * (this.moreWidth - this.initMoreWidth)})
183 } 191 }
184 } 192 }
185 } 193 }