@lynx-example/lynx-ui-scroll-view 0.0.9 → 0.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/ScrollBy/index.css +78 -0
- package/ScrollBy/index.tsx +63 -0
- package/dist/ScrollViewScrollBy.lynx.bundle +0 -0
- package/lynx.config.mjs +1 -0
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
@import "@lynx-js/luna-styles/index.css";
|
|
2
|
+
|
|
3
|
+
.demo-container {
|
|
4
|
+
width: 100%;
|
|
5
|
+
height: 100%;
|
|
6
|
+
padding: 32px 20px;
|
|
7
|
+
background-color: var(--canvas);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.toolbar {
|
|
11
|
+
width: 100%;
|
|
12
|
+
display: flex;
|
|
13
|
+
flex-direction: row;
|
|
14
|
+
gap: 12px;
|
|
15
|
+
margin-bottom: 16px;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.button {
|
|
19
|
+
flex: 1;
|
|
20
|
+
height: 48px;
|
|
21
|
+
border-radius: 12px;
|
|
22
|
+
display: flex;
|
|
23
|
+
align-items: center;
|
|
24
|
+
justify-content: center;
|
|
25
|
+
background-color: var(--canvas-ambient);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.button--primary {
|
|
29
|
+
background-color: var(--primary);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.button-text {
|
|
33
|
+
color: var(--content);
|
|
34
|
+
font-size: 15px;
|
|
35
|
+
font-weight: 600;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.button--primary .button-text {
|
|
39
|
+
color: var(--canvas);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.scroll-view {
|
|
43
|
+
width: 100%;
|
|
44
|
+
height: 640px;
|
|
45
|
+
border-radius: 18px;
|
|
46
|
+
background-color: var(--canvas-ambient);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.scroll-view-content {
|
|
50
|
+
width: 100%;
|
|
51
|
+
padding: 12px;
|
|
52
|
+
display: flex;
|
|
53
|
+
flex-direction: column;
|
|
54
|
+
gap: 12px;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.card {
|
|
58
|
+
width: 100%;
|
|
59
|
+
height: 96px;
|
|
60
|
+
border-radius: 14px;
|
|
61
|
+
padding: 18px;
|
|
62
|
+
display: flex;
|
|
63
|
+
flex-direction: column;
|
|
64
|
+
justify-content: center;
|
|
65
|
+
background: linear-gradient(135deg, var(--gradient-a), var(--gradient-b));
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.card-title {
|
|
69
|
+
color: var(--content);
|
|
70
|
+
font-size: 20px;
|
|
71
|
+
font-weight: 700;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.card-subtitle {
|
|
75
|
+
margin-top: 6px;
|
|
76
|
+
color: var(--content-subtle);
|
|
77
|
+
font-size: 13px;
|
|
78
|
+
}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
// Copyright 2026 The Lynx Authors. All rights reserved.
|
|
2
|
+
// Licensed under the Apache License Version 2.0 that can be found in the
|
|
3
|
+
// LICENSE file in the root directory of this source tree.
|
|
4
|
+
|
|
5
|
+
import { root } from '@lynx-js/react'
|
|
6
|
+
|
|
7
|
+
import './index.css'
|
|
8
|
+
|
|
9
|
+
const ITEMS = Array.from({ length: 24 }, (_, index) => index + 1)
|
|
10
|
+
|
|
11
|
+
function scrollByOffset(offset: number) {
|
|
12
|
+
'main thread'
|
|
13
|
+
lynx.querySelector('#scrollByDemoView')?.invoke('scrollBy', {
|
|
14
|
+
offset,
|
|
15
|
+
})
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
function App() {
|
|
19
|
+
return (
|
|
20
|
+
<view className='demo-container lunaris-dark'>
|
|
21
|
+
<view className='toolbar'>
|
|
22
|
+
<view
|
|
23
|
+
className='button'
|
|
24
|
+
main-thread:bindtap={() => {
|
|
25
|
+
'main thread'
|
|
26
|
+
scrollByOffset(-160)
|
|
27
|
+
}}
|
|
28
|
+
>
|
|
29
|
+
<text className='button-text'>Scroll Up</text>
|
|
30
|
+
</view>
|
|
31
|
+
<view
|
|
32
|
+
className='button button--primary'
|
|
33
|
+
main-thread:bindtap={() => {
|
|
34
|
+
'main thread'
|
|
35
|
+
scrollByOffset(160)
|
|
36
|
+
}}
|
|
37
|
+
>
|
|
38
|
+
<text className='button-text'>Scroll Down</text>
|
|
39
|
+
</view>
|
|
40
|
+
</view>
|
|
41
|
+
|
|
42
|
+
<scroll-view
|
|
43
|
+
id='scrollByDemoView'
|
|
44
|
+
className='scroll-view'
|
|
45
|
+
scroll-orientation='vertical'
|
|
46
|
+
enable-scroll={false}
|
|
47
|
+
>
|
|
48
|
+
<view className='scroll-view-content'>
|
|
49
|
+
{ITEMS.map(item => (
|
|
50
|
+
<view className='card' key={`scroll-by-card-${item}`}>
|
|
51
|
+
<text className='card-title'>{`Item ${item}`}</text>
|
|
52
|
+
<text className='card-subtitle'>scrollBy target content</text>
|
|
53
|
+
</view>
|
|
54
|
+
))}
|
|
55
|
+
</view>
|
|
56
|
+
</scroll-view>
|
|
57
|
+
</view>
|
|
58
|
+
)
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
root.render(<App />)
|
|
62
|
+
|
|
63
|
+
export default App
|
|
Binary file
|
package/lynx.config.mjs
CHANGED
|
@@ -9,6 +9,7 @@ const defaultConfig = exampleConfig({
|
|
|
9
9
|
ScrollViewHorizontal: './Horizontal/index.tsx',
|
|
10
10
|
ScrollViewHorizontalRTL: './HorizontalRTL/index.tsx',
|
|
11
11
|
ScrollViewInnerFlex: './InnerFlex/index.tsx',
|
|
12
|
+
ScrollViewScrollBy: './ScrollBy/index.tsx',
|
|
12
13
|
ScrollViewZIndex: './ZIndex/index.tsx',
|
|
13
14
|
}, { needWeb: false })
|
|
14
15
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lynx-example/lynx-ui-scroll-view",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.10",
|
|
4
4
|
"description": "Example app demonstrating ScrollView usage in lynx-ui",
|
|
5
5
|
"homepage": "https://github.com/lynx-family/lynx-ui/tree/main/apps/examples/ScrollView#readme",
|
|
6
6
|
"repository": {
|
|
@@ -24,8 +24,8 @@
|
|
|
24
24
|
],
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@lynx-js/react": "0.114.0",
|
|
27
|
-
"@lynx-js/
|
|
28
|
-
"@lynx-js/
|
|
27
|
+
"@lynx-js/lynx-ui": "3.134.0",
|
|
28
|
+
"@lynx-js/luna-styles": "0.2.0"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"@lynx-js/qrcode-rsbuild-plugin": "0.4.6",
|