Skip to content

Commit

Permalink
添加横向滚动测试2--Stack方式
Browse files Browse the repository at this point in the history
  • Loading branch information
@WinWang
WinWang committed Jan 14, 2024
1 parent f86244d commit 0700727
Show file tree
Hide file tree
Showing 2 changed files with 84 additions and 16 deletions.
7 changes: 7 additions & 0 deletions entry/src/main/ets/pages/test/TestHorizontalPage.ets
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
import { LogUtils } from '../../utils/LogUtils'
import { CommonTopBar } from '../../views/CommonTopBar'



/**
* 这种方式实现的不可取，初始化N个Scroller+复用滚动同步太麻烦了
*/

@Entry
@Component
struct TestHorizontalPage {
Expand Down Expand Up @@ -80,6 +86,7 @@ struct TestHorizontalPage {
}
.width('100%')
.height("100%")
.cachedCount(100)
.flexGrow(1)
}
.width("100%")
Expand Down
93 changes: 77 additions & 16 deletions entry/src/main/ets/pages/test/TestHorizontalPage2.ets
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,19 @@ import { CommonTopBar } from '../../views/CommonTopBar'
@Entry
@Component
struct TestHorizontalPage2 {
private dataList: Array<number> = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
private dataList: Array<number> = []
private leftScroller: Scroller = new Scroller()
private rightScroller: Scroller = new Scroller()
private scrollScroller: Scroller = new Scroller()
private scrollFlag = -1 // 1=左边 2=右边
private scrollY = 0
@State xScroll: number = 0

async aboutToAppear() {
for (let index = 0; index < 100; index++) {
this.dataList.push(index)
}
}

build() {
Column() {
Expand All @@ -27,68 +35,121 @@ struct TestHorizontalPage2 {
})
}
.width(100)
.cachedCount(5)
.height("100%")
.flexGrow(1)
.onScrollStart(() => {
LogUtils.debug(`滚动-左边--Start${this.scrollFlag}`)
if (this.scrollFlag == -1) {
this.scrollFlag = 1
}
LogUtils.debug(`滚动-左边--Start${this.scrollFlag}`)
})
.onReachStart(() => {
this.scrollFlag = -1
})
.onReachEnd(() => {
this.scrollFlag = -1
})
.onScrollStop(() => {
LogUtils.debug(`滚动-左边--Stop${this.scrollFlag}`)
this.scrollFlag = -1
})
.onScroll((scrollOffset, state) => {
// let yOffset = this.rightScroller.currentOffset().yOffset
let yOffset = this.leftScroller.currentOffset().yOffset
LogUtils.debug(`滚动-左边>${yOffset}`)
if (this.scrollFlag == 1) {
LogUtils.debug("滚动-左边")
this.rightScroller.scrollBy(0, scrollOffset)
this.scrollY = yOffset
// this.rightScroller.scrollTo({ xOffset: 0, yOffset: yOffset })
}
})
.onScrollFrameBegin((offset: number) => {
LogUtils.debug(`滚动-左边Frame`)
return { offsetRemain: Math.floor(offset) }
})
.edgeEffect(EdgeEffect.None)

Scroll() {
Scroll(this.scrollScroller) {
List({ scroller: this.rightScroller }) {
ForEach(this.dataList, (item, index) => {
ListItem() {
Row() {
Text(`第一列${item}`).width(100).textAlign(TextAlign.Center)
Text(`第二列${item}`).width(100).textAlign(TextAlign.Center)
Text(`第三列${item}`).width(100).textAlign(TextAlign.Center)
Text(`第四列${item}`).width(100).textAlign(TextAlign.Center)
Text(`第五列${item}`).width(100).textAlign(TextAlign.Center)
Text(`第六列${item}`).width(100).textAlign(TextAlign.Center)
Text(`第七列${item}`).width(100).textAlign(TextAlign.Center)
Stack({ alignContent: Alignment.Start }) {
Row() {
Text(`第1列${item}`).width(100).textAlign(TextAlign.Center)
Text(`第二列${item}`).width(100).textAlign(TextAlign.Center)
Text(`第三列${item}`).width(100).textAlign(TextAlign.Center)
Text(`第四列${item}`).width(100).textAlign(TextAlign.Center)
Text(`第五列${item}`).width(100).textAlign(TextAlign.Center)
Text(`第六列${item}`).width(100).textAlign(TextAlign.Center)
Text(`第七列${item}`).width(100).textAlign(TextAlign.Center)
}
.height(100)
.zIndex(0)

Text(`第一列${item}`)
.width(100)
.textAlign(TextAlign.Center)
.height(100)
.zIndex(1)
.position({ x: this.xScroll, y: 0 })
.markAnchor({ x: 0, y: 0 })
.backgroundColor(Color.White)
}
.height(100)
}
})
}
.height("100%")
.width(700)
.cachedCount(5)
.onScrollStart(() => {
LogUtils.debug(`滚动-右边--Start${this.scrollFlag}`)
if (this.scrollFlag == -1) {
this.scrollFlag = 2
}
LogUtils.debug(`滚动-右边--Start${this.scrollFlag}`)
})
.onScrollStop(() => {
LogUtils.debug(`滚动-右边--Stop${this.scrollFlag}`)
if (this.scrollFlag == 2) {
let yOffset = this.rightScroller.currentOffset().yOffset
this.leftScroller.scrollTo({ yOffset: yOffset, xOffset: 0 })
}
this.scrollFlag = -1
})
.onScroll((scrollOffset, state) => {
// let yOffset = this.rightScroller.currentOffset().yOffset
let yOffset = this.rightScroller.currentOffset().yOffset
LogUtils.debug(`滚动-右边>${yOffset}`)
if (this.scrollFlag == 2) {
LogUtils.debug("滚动-右边")
this.leftScroller.scrollBy(0, scrollOffset)
this.scrollY = yOffset
// this.leftScroller.scrollTo({ xOffset: 0, yOffset: yOffset })
}
})
.onReachStart(() => {
this.scrollFlag = -1
})
.onReachEnd(() => {
this.scrollFlag = -1
})
.onScrollFrameBegin((offset: number) => {
LogUtils.debug(`滚动-右边Frame`)
return { offsetRemain: Math.floor(offset) }
})
.edgeEffect(EdgeEffect.None)
}
.scrollable(ScrollDirection.Horizontal)
.height("100%")
.flexShrink(1)
.onScroll((xOffset: number, yOffset: number) => {
let offsetX = this.scrollScroller.currentOffset().xOffset;
this.xScroll = offsetX
LogUtils.debug(`1>>>>>${this.xScroll}`)
})
.onScrollFrameBegin((offset, state) => {
let offsetX = this.scrollScroller.currentOffset().xOffset;
LogUtils.debug(`2>>>>>${offset}>>>>>>${offsetX}`)
return { offsetRemain: offset/2 }
})
}
.height("100%")
.width("100%")
Expand Down

0 comments on commit 0700727

Please sign in to comment.