鸿蒙开发5.0【基于Swiper的页面布局】

场景一：Swiper页面支持自界说动画
方案：

• 给Swiper组件设置.nextMargin(50).prevMargin(50)属性。
  
• 给Swiper组件添加onChange变乱，设置当前this.currentIndex=index，当currentIndex为首页大概尾页时，设置上一张以及下一张图片的缩放值。
  核心代码：
  
  2. .onChange((index) => {
  4. console.info('changeIndex' + index)
  6. this.currentIndex = index
  8. // 设置当前index缩放值为最大值
  10. this.scaleArray[this.currentIndex] = MAX_SCALE;
  12. if (this.currentIndex == 0) {
  14. // 当前index=0时，设置上一张图片的缩放值
  16. this.scaleArray[this.scaleArray.length - 1] = MIN_SCALE
  18. } else
  20. // 当前index不为0时，设置上一张图片的缩放值
  22. {
  24. this.scaleArray[this.currentIndex -1] = MIN_SCALE
  26. }
  30. if (this.currentIndex == this.scaleArray.length - 1) {
  32. // 当index为最后一张图片时，设置下一张图片的缩放值
  34. this.scaleArray[0] = MIN_SCALE
  36. } else
  38. // 当index不为最后一张时,设置上一张图片的缩放值
  40. {
  42. this.scaleArray[this.currentIndex + 1] = MIN_SCALE
  44. }
  46. })

  复制代码
• 设置Swiper组件的.displayMode(SwiperDisplayMode.STRETCH)使其Swiper滑动一页的宽度为Swiper组件自身的宽度，如果displayMode属性为SwiperDisplayMode.AUTO_LINEAR时，customContentTransition接口不生效。
  
• 给Swiper添加customContentTransition(transition: SwiperContentAnimatedTransition)变乱，设置页面移除视窗时超时1000ms下渲染树，然后对视窗内全部页面逐帧回调transition。想要实现显示在视窗内正中间的Index为正常状态，两边的index图片为缩小状态。通过变乱回调的proxy获取下面数据，通过滑动的间隔来盘算滑动过程中图片的缩放值。
  
  2. .customContentTransition({
  4. // 页面移除视窗时超时1000ms下渲染树
  6. timeout: 1000,
  8. // 对视窗内所有页面逐帧回调transition，在回调中修改opacity、scale、translate、zIndex等属性值，实现自定义动画
  10. transition: (proxy: SwiperContentTransitionProxy) => {
  12. if (this.startSwiperOffset == 0) {
  14. this.startSwiperOffset = proxy.position * proxy.mainAxisLength;
  16. console.info('startSwiperOffset:' + this.startSwiperOffset)
  18. }
  20. console.info('proxy-selectedIndex:' + proxy.selectedIndex + '--index:' + proxy.index +
  22. '--position:' + proxy.position + '--mainAxisLength:' + proxy.mainAxisLength)
  24. let offset: number = proxy.position * proxy.mainAxisLength // 移动距离
  26. let currentScale: number = this.scaleArray[proxy.index] //当前index缩放值
  30. let nextIndex = (proxy.index == this.scaleArray.length - 2 ? 0 : proxy.index + 1) //计算下一个index
  32. let preIndex = (proxy.index == 0 ? this.scaleArray.length - 2 : proxy.index - 1) //计算上一个index
  36. let nextScale: number = this.scaleArray[nextIndex] //下一个index缩放值
  38. let preScale: number = this.scaleArray[preIndex] //上一个index缩放值
  40. // 通过滑动的距离来计算滑动过程中图片的缩放值
  42. let distance = Math.abs(offset)
  44. currentScale = MAX_SCALE - Math.min(distance / DRAGGING_MAX_DISTANCE, MAX_SCALE - MIN_SCALE) //当前缩放值
  46. if (this.startSwiperOffset > offset) {
  48. nextScale = MIN_SCALE + Math.min(distance / DRAGGING_MAX_DISTANCE, MAX_SCALE - MIN_SCALE)
  50. preScale = MIN_SCALE
  52. } else {
  54. preScale = MIN_SCALE + Math.min(distance / DRAGGING_MAX_DISTANCE, MAX_SCALE - MIN_SCALE)
  56. nextScale = MIN_SCALE
  58. }
  60. this.scaleArray[this.currentIndex] = currentScale //当前index缩放值
  62. this.scaleArray[nextIndex] = nextScale //下一个index缩放值
  64. this.scaleArray[preIndex] = preScale //上一个index缩放值
  66. }
  68. })

  复制代码

场景二：Swiper指示器间隔底部位置
方案：
此方案只适用于指示点间隔底部的位置
将Swiper分成两个部分上部分为Swiper内容区，下部分为一块空缺地域， 空缺地域专门放置指示器点。可以通过indicator 属性去设置指示器点的部分样式。

2. @Entry
4. @Component
6. struct SwiperPageTwo {
8. @State message: string = 'Hello World';
10. private bannerInfo: number[] = [1, 2, 3, 4]
12. dataList:Color[] = [Color.Gray, Color.Yellow, Color.Blue,Color.Pink,Color.Orange]
16. build() {
18. if (this.bannerInfo && this.bannerInfo.length > 0) {
20. Swiper() {
22. ForEach(this.bannerInfo, (item: number, index: number) => {
24. Column() {
26. // 第一部分 Swiper内容区域
28. Column()
30. .width("100%")
32. .height(200)
34. .borderRadius("8vp")
36. .backgroundColor(this.dataList[index])
38. // 第二部分 指示点区域
40. Column() {
44. }.width('100%')
46. .height(35)
48. }
52. })
54. }
56. .cachedCount(2)
58. .autoPlay(true)
60. .interval(3000)
62. .vertical(false)
64. .loop(true)
66. .margin({ left: "16vp", right: "16vp" })
68. .indicator(
70. new DotIndicator()
72. .bottom(5)
74. .itemWidth("8vp")
76. .itemHeight("8vp")
78. .selectedItemWidth("10vp")
80. .selectedItemHeight("10vp")
82. .color(Color.Green)
84. .selectedColor(Color.Orange)
86. )
88. }
90. }
92. }

复制代码

场景三：Swiper自界说指示器
现在Swiper自带的指示器位置限定比较固定，不能完全靠底部、左边大概右边以及不能调整指示器中间间距，因此可以思量自界说指示器，将指示器位置定位到我们所需的地方。
方案：
给Swiper自带指示器设置.indicator(false)，然后在Swiper组件下面写一个自界说的指示器。

2. // 自定义指示器，可以通过定位
4. Row() {
6. ForEach(this.data, (item: string, index: number) => {
8. Column()
10. .width(this.currentIndex === index ? 10 : 5)
12. .height(5)// 设置指示点中间间距
14. .margin(5)
16. .borderRadius(5)
18. .backgroundColor(Color.Green)
20. .backgroundColor(this.currentIndex === index ? Color.Red : Color.Gray)
22. }, (item: string) => item)
24. }
26. //设置指示点距离Swiper上下的距离
28. .margin({ top: 5 })
32. // 设置指示点在Swiper的左边或者右边或者其他地方
34. // .position({x:0,y:300})

复制代码

以上就是本篇文章所带来的鸿蒙开发中一小部分技术讲解；想要学习完整的鸿蒙全栈技术。可以在末端找我可全部拿到！
下面是鸿蒙的完整学习路线，展示如下：

除此之外，根据这个学习鸿蒙全栈学习路线，也附带一整套完整的学习【文档+视频】，内容包含如下：
   内容包含了：（ArkTS、ArkUI、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、鸿蒙南向开发、鸿蒙项目实战）等技术知识点。帮助各人在学习鸿蒙路上快速发展！
  鸿蒙【北向应用开发+南向系统层开发】文档

鸿蒙【基础+实战项目】视频

鸿蒙面经

为了避免各人在学习过程中产生更多的时间本钱，对比我把以上内容全部放在了↓↓↓想要的可以自拿喔！谢谢各人观看！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。