js: add slidePosition
This commit is contained in:
@@ -1,7 +1,3 @@
|
||||
export default [
|
||||
'src/Counter',
|
||||
'src/Snake',
|
||||
'src/ComplicatedAnimations',
|
||||
'src/.*Demo',
|
||||
'src/Gobang',
|
||||
'src/SliderInListDemo',
|
||||
]
|
67
doric-demo/src/SliderInListDemo.tsx
Normal file
67
doric-demo/src/SliderInListDemo.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
import {
|
||||
Group,
|
||||
List,
|
||||
Panel,
|
||||
layoutConfig,
|
||||
jsx,
|
||||
ListItem,
|
||||
Slider,
|
||||
SlideItem,
|
||||
Image,
|
||||
Color,
|
||||
} from "doric";
|
||||
const imageUrls = [
|
||||
"http://b.hiphotos.baidu.com/image/pic/item/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg",
|
||||
"http://f.hiphotos.baidu.com/image/pic/item/0e2442a7d933c8956c0e8eeadb1373f08202002a.jpg",
|
||||
"http://f.hiphotos.baidu.com/image/pic/item/b151f8198618367aa7f3cc7424738bd4b31ce525.jpg",
|
||||
"http://b.hiphotos.baidu.com/image/pic/item/0eb30f2442a7d9337119f7dba74bd11372f001e0.jpg",
|
||||
"http://a.hiphotos.baidu.com/image/h%3D300/sign=b38f3fc35b0fd9f9bf175369152cd42b/9a504fc2d5628535bdaac29e9aef76c6a6ef63c2.jpg",
|
||||
"http://h.hiphotos.baidu.com/image/pic/item/810a19d8bc3eb1354c94a704ac1ea8d3fd1f4439.jpg",
|
||||
"http://hbimg.b0.upaiyun.com/ca29ea125b7f2d580f573e48eb594b1ef509757f34a08-m0hK45_fw658",
|
||||
"http://b.hiphotos.baidu.com/image/pic/item/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg",
|
||||
"http://f.hiphotos.baidu.com/image/pic/item/0e2442a7d933c8956c0e8eeadb1373f08202002a.jpg",
|
||||
"http://f.hiphotos.baidu.com/image/pic/item/b151f8198618367aa7f3cc7424738bd4b31ce525.jpg",
|
||||
"http://b.hiphotos.baidu.com/image/pic/item/0eb30f2442a7d9337119f7dba74bd11372f001e0.jpg",
|
||||
"http://a.hiphotos.baidu.com/image/h%3D300/sign=b38f3fc35b0fd9f9bf175369152cd42b/9a504fc2d5628535bdaac29e9aef76c6a6ef63c2.jpg",
|
||||
"http://h.hiphotos.baidu.com/image/pic/item/810a19d8bc3eb1354c94a704ac1ea8d3fd1f4439.jpg",
|
||||
];
|
||||
|
||||
@Entry
|
||||
export class SliderInListDemo extends Panel {
|
||||
build(root: Group) {
|
||||
<List
|
||||
parent={root}
|
||||
layoutConfig={layoutConfig().most()}
|
||||
itemCount={50}
|
||||
renderItem={() =>
|
||||
(
|
||||
<ListItem layoutConfig={layoutConfig().mostWidth().fitHeight()}>
|
||||
<Slider
|
||||
layoutConfig={layoutConfig().mostWidth().justHeight()}
|
||||
height={50}
|
||||
backgroundColor={Color.RED}
|
||||
itemCount={imageUrls.length}
|
||||
onPageSlided={function (idx) {
|
||||
const sliderView = this as unknown as Slider;
|
||||
sliderView.slidePosition = idx;
|
||||
}}
|
||||
renderPage={(idx) =>
|
||||
(
|
||||
<SlideItem
|
||||
layoutConfig={layoutConfig().mostWidth().fitHeight()}
|
||||
>
|
||||
<Image
|
||||
layoutConfig={layoutConfig().mostWidth().justHeight()}
|
||||
height={100}
|
||||
imageUrl={imageUrls[idx]}
|
||||
/>
|
||||
</SlideItem>
|
||||
) as SlideItem
|
||||
}
|
||||
/>
|
||||
</ListItem>
|
||||
) as ListItem
|
||||
}
|
||||
/>;
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user