1/* 2 * Copyright (c) 2022 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15import { NavigationBar } from '../../../common/components/navigationBar' 16 17@Entry 18@Component 19struct ScrollSample { 20 scroller: Scroller = new Scroller() 21 scrollercontrol: Scroller = new Scroller() 22 @State flag: boolean = true 23 private list: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 24 @State scrollable: number = 2 25 @State scrollWidth: string = '100%' 26 @State scrollBar: boolean = true 27 @State scrollBarWidth: number = 30 28 @State scrollBarColor: string = '#d0d0d0' 29 30 build() { 31 Column() { 32 NavigationBar({ title: 'Scroll' }) 33 Scroll(this.scroller) { 34 if (this.scrollable == 2) { 35 Column() { 36 ForEach(this.list, (item) => { 37 Text(item.toString()) 38 .width('90%') 39 .height(72) 40 .backgroundColor('#fff') 41 .borderRadius(15) 42 .fontSize(24) 43 .textAlign(TextAlign.Center) 44 .margin(10) 45 }, item => item) 46 }.width('100%').backgroundColor('#F1F3F5').padding({ bottom: 10 }) 47 } else { 48 Row() { 49 ForEach(this.list, (item) => { 50 Column() { 51 Text(item.toString()) 52 .width(72) 53 .height('100%') 54 .backgroundColor('#fff') 55 .borderRadius(15) 56 .fontSize(16) 57 .textAlign(TextAlign.Center) 58 } 59 .margin({ bottom: 20, right: 10 }) 60 }, item => item) 61 } 62 .height('100%') 63 .backgroundColor('#F1F3F5') 64 .padding({ left: '2%', right: 210 }) 65 } 66 } 67 .width('96%') 68 .height('40%') 69 .scrollable(this.scrollable == 1 ? ScrollDirection.Horizontal : this.scrollable == 2 ? ScrollDirection.Vertical : ScrollDirection.None) 70 .scrollBar(this.scrollBar ? BarState.On : BarState.Off) 71 .scrollBarColor(this.scrollBarColor) 72 .scrollBarWidth(this.scrollBarWidth) 73 .onScroll((xOffset: number, yOffset: number) => { 74 console.info(xOffset + ' ' + yOffset) 75 }) 76 .onScrollEdge((side: Edge) => { 77 console.info('To the edge') 78 }) 79 .onScrollEnd(() => { 80 console.info('Scroll Stop') 81 }) 82 83 Scroll(this.scrollercontrol) { 84 Column() { 85 Row() { 86 Button('previous page') 87 .onClick(() => { 88 this.scroller.scrollPage({ next: false }) 89 }) 90 .fontSize('12fp') 91 .fontWeight(FontWeight.Medium) 92 .fontColor('#FFFFFF') 93 .borderRadius(14) 94 .padding({ left: 8, right: 8, top: 6, bottom: 6 }) 95 .backgroundColor('#007DFF') 96 .alignSelf(ItemAlign.Center) 97 98 Blank() 99 100 Button('next page') 101 .onClick(() => { 102 this.scroller.scrollPage({ next: true }) 103 }) 104 .fontSize('12fp') 105 .fontWeight(FontWeight.Medium) 106 .fontColor('#FFFFFF') 107 .borderRadius(14) 108 .padding({ left: 8, right: 8, top: 6, bottom: 6 }) 109 .backgroundColor('#007DFF') 110 .alignSelf(ItemAlign.Center) 111 .margin({ left: '3%' }) 112 } 113 .width('100%') 114 .padding({ left: '3%', right: '3%', top: 12, bottom: 12 }) 115 .borderRadius(24) 116 .backgroundColor('#FFFFFF') 117 .margin({ top: 8 }) 118 119 Row() { 120 Button('scroll 100') 121 .onClick(() => { 122 this.scroller.scrollTo({ 123 xOffset: 0, 124 yOffset: this.scroller.currentOffset() 125 .yOffset + 100 126 }) 127 }) 128 .fontSize('12fp') 129 .fontWeight(FontWeight.Medium) 130 .fontColor('#FFFFFF') 131 .borderRadius(14) 132 .padding({ left: 8, right: 8, top: 6, bottom: 6 }) 133 .backgroundColor('#007DFF') 134 .alignSelf(ItemAlign.Center) 135 136 Blank() 137 138 Button('back top') 139 .onClick(() => { 140 this.scroller.scrollEdge(Edge.Top) 141 }) 142 .fontSize('12fp') 143 .fontWeight(FontWeight.Medium) 144 .fontColor('#FFFFFF') 145 .borderRadius(14) 146 .padding({ left: 8, right: 8, top: 6, bottom: 6 }) 147 .backgroundColor('#007DFF') 148 .alignSelf(ItemAlign.Center) 149 .margin({ left: '3%' }) 150 } 151 .width('100%') 152 .padding({ left: '3%', right: '3%', top: 12, bottom: 12 }) 153 .borderRadius(24) 154 .backgroundColor('#FFFFFF') 155 .margin({ top: 8 }) 156 157 Column() { 158 Row() { 159 Text('scrollable') 160 .fontWeight(FontWeight.Medium) 161 .fontColor('#182431') 162 .opacity(0.5) 163 .fontSize('16fp') 164 Blank() 165 Text(this.scrollable == 1 ? 'Horizontal' : this.scrollable == 2 ? 'Vertical' : 'None') 166 .fontSize('14fp') 167 .fontWeight(FontWeight.Medium) 168 .width('50%') 169 .textAlign(TextAlign.End) 170 } 171 .width('100%') 172 .padding({ left: '3%', right: '3%', top: 12, bottom: 12 }) 173 .borderRadius(24) 174 .backgroundColor('#FFFFFF') 175 .margin({ top: 8 }) 176 .bindMenu([ 177 { 178 value: 'Horizontal', 179 action: () => { 180 this.scrollable = 1 181 this.scrollWidth = '150%' 182 this.scrollBar = false 183 } 184 }, 185 { 186 value: 'Vertical', 187 action: () => { 188 this.scrollable = 2 189 this.scrollWidth = '100%' 190 this.scrollBar = true 191 } 192 }, 193 { 194 value: 'None', 195 action: () => { 196 this.scrollable = 3 197 } 198 } 199 ]) 200 201 Row() { 202 Text('scrollBar') 203 .fontWeight(FontWeight.Medium) 204 .fontColor('#182431') 205 .opacity(0.5) 206 .fontSize('16fp') 207 Blank() 208 Text(this.scrollBar ? 'On' : 'Off') 209 .fontSize('14fp') 210 .fontWeight(FontWeight.Medium) 211 .width('50%') 212 .textAlign(TextAlign.End) 213 214 } 215 .width('100%') 216 .padding({ left: '3%', right: '3%', top: 12, bottom: 12 }) 217 .borderRadius(24) 218 .backgroundColor('#FFFFFF') 219 .margin({ top: 8 }) 220 .bindMenu([ 221 { 222 value: 'On', 223 action: () => { 224 this.scrollBar = true 225 } 226 }, 227 { 228 value: 'Off', 229 action: () => { 230 this.scrollBar = false 231 } 232 } 233 ]) 234 235 if (this.scrollBar) { 236 Row() { 237 Text('scrollBarColor:') 238 .fontWeight(FontWeight.Medium) 239 .fontColor('#182431') 240 .opacity(0.5) 241 .fontSize('16fp') 242 Blank() 243 Text(this.scrollBarColor == '#d0d0d0' ? '灰色' : '浅蓝灰色') 244 .fontSize('14fp') 245 .fontWeight(FontWeight.Medium) 246 .width('50%') 247 .textAlign(TextAlign.End) 248 249 } 250 .width('100%') 251 .padding({ left: '3%', right: '3%', top: 12, bottom: 12 }) 252 .borderRadius(24) 253 .backgroundColor('#FFFFFF') 254 .margin({ top: 8 }) 255 .bindMenu([ 256 { 257 value: '灰色', 258 action: () => { 259 this.scrollBarColor = '#d0d0d0' 260 } 261 }, 262 { 263 value: '浅灰蓝色', 264 action: () => { 265 this.scrollBarColor = '#b0e0e6' 266 } 267 } 268 ]) 269 } 270 271 if (this.scrollBar) { 272 Column() { 273 Row() { 274 Text('scrollBarWidth') 275 .fontWeight(FontWeight.Medium) 276 .fontColor('#182431') 277 .opacity(0.5) 278 .fontSize('16fp') 279 Blank() 280 Text('' + this.scrollBarWidth) 281 .fontSize('16fp') 282 .fontWeight(FontWeight.Medium) 283 } 284 .width('100%') 285 .borderRadius(24) 286 .backgroundColor('#FFFFFF') 287 288 Slider({ 289 value: this.scrollBarWidth, 290 min: 0, 291 max: 350, 292 step: 1, 293 style: SliderStyle.OutSet 294 }) 295 .blockColor('#FFFFFF') 296 .trackColor('#182431') 297 .borderColor('rgba(0,0,0,0.04) ') 298 .selectedColor('#007DFF') 299 .width('100%') 300 .showSteps(true) 301 .showTips(false) 302 .onChange((value: number, mode: SliderChangeMode) => { 303 this.scrollBarWidth = value 304 }) 305 } 306 .width('100%') 307 .padding({ left: '3%', right: '3%', top: 12, bottom: 12 }) 308 .borderRadius(24) 309 .backgroundColor('#FFFFFF') 310 .margin({ top: 8 }) 311 } 312 } 313 }.width('100%') 314 } 315 .scrollBar(BarState.Off) 316 .margin({ top: 24 }) 317 .height('45%') 318 } 319 .height('100%') 320 .backgroundColor('#F1F3F5') 321 .padding({ left: '3%', right: '3%', bottom: 10 }) 322 } 323 324 pageTransition() { 325 PageTransitionEnter({ duration: 370, curve: Curve.Friction }) 326 .slide(SlideEffect.Bottom) 327 .opacity(0.0) 328 329 PageTransitionExit({ duration: 370, curve: Curve.Friction }) 330 .slide(SlideEffect.Bottom) 331 .opacity(0.0) 332 } 333}