HarmonyOS APP - ScrollView体验与分享 原创

鸿蒙时代
发布于 2021-3-27 10:39
浏览
1收藏

ScrollView是一种带滚动功能的组件,它采用滑动的方式在有限的区域内显示更多的内容。

这里我做了一个小案例,在ScrollView里面套ScrollView,当然我们也可以使用DirectionalLayout中的horizontal或者vertical属性控制图片滑动的方向这里使用ScrollView可以很方便的展示跟多的内容。

  HarmonyOS APP - ScrollView体验与分享-鸿蒙开发者社区

  HarmonyOS APP - ScrollView体验与分享-鸿蒙开发者社区

  

 

HarmonyOS APP - ScrollView体验与分享-鸿蒙开发者社区

 

 

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">
    <DirectionalLayout
        ohos:height="1800px"
        ohos:width="match_parent"
        ohos:orientation="vertical">
        <ScrollView
            ohos:height="match_parent"
            ohos:width="match_parent">
            <DirectionalLayout
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:orientation="vertical">
                <DirectionalLayout
                    ohos:height="match_content"
                    ohos:width="match_parent">
                    <Image
                        ohos:height="600px"
                        ohos:width="match_parent"
                        ohos:image_src="$media:tupian1"
                        />
                </DirectionalLayout>
                <DirectionalLayout
                    ohos:height="80px"
                    ohos:width="match_parent">
                    <Text
                        ohos:height="match_parent"
                        ohos:width="match_parent"
                        ohos:text="颜色展示"
                        ohos:text_size="18fp"/>
                </DirectionalLayout>
                <DirectionalLayout
                    ohos:height="700px"
                    ohos:width="match_parent"
                    ohos:orientation="vertical">
                    <ScrollView
                        ohos:height="match_parent"
                        ohos:width="match_parent">
                        <DirectionalLayout
                            ohos:height="match_content"
                            ohos:width="match_parent"
                            ohos:orientation="vertical">
                            <DirectionalLayout
                                ohos:height="match_content"
                                ohos:width="match_parent"
                                ohos:orientation="vertical">
                                <Text
                                    ohos:height="80px"
                                    ohos:width="match_parent"
                                    ohos:text="红色"
                                    ohos:text_size="18fp"/>
                                <Image
                                    ohos:height="match_content"
                                    ohos:width="match_parent"
                                    ohos:image_src="$media:red"
                                    />
                            </DirectionalLayout>
                            <DirectionalLayout
                                ohos:height="match_content"
                                ohos:width="match_parent"
                                ohos:orientation="vertical">
                                <Text
                                    ohos:height="80px"
                                    ohos:width="match_parent"
                                    ohos:text="蓝色"
                                    ohos:text_size="18fp"/>
                                <Image
                                    ohos:height="match_content"
                                    ohos:width="match_parent"
                                    ohos:image_src="$media:blue"
                                    />
                            </DirectionalLayout>
                            <DirectionalLayout
                                ohos:height="match_content"
                                ohos:width="match_parent"
                                ohos:orientation="vertical">
                                <Text
                                    ohos:height="80px"
                                    ohos:width="match_parent"
                                    ohos:text="黄色"
                                    ohos:text_size="18fp"/>
                                <Image
                                    ohos:height="match_content"
                                    ohos:width="match_parent"
                                    ohos:image_src="$media:yellow"
                                    />
                            </DirectionalLayout>
                            <DirectionalLayout
                                ohos:height="match_content"
                                ohos:width="match_parent"
                                ohos:orientation="vertical">
                                <Text
                                    ohos:height="80px"
                                    ohos:width="match_parent"
                                    ohos:text="粉色"
                                    ohos:text_size="18fp"/>
                                <Image
                                    ohos:height="match_content"
                                    ohos:width="match_parent"
                                    ohos:image_src="$media:pink"
                                    />
                            </DirectionalLayout>
                            <DirectionalLayout
                                ohos:height="match_content"
                                ohos:width="match_parent"
                                ohos:orientation="vertical">
                                <Text
                                    ohos:height="80px"
                                    ohos:width="match_parent"
                                    ohos:text="绿色"
                                    ohos:text_size="18fp"/>
                                <Image
                                    ohos:height="match_content"
                                    ohos:width="match_parent"
                                    ohos:image_src="$media:grenn"
                                    />
                            </DirectionalLayout>

                        </DirectionalLayout>
                    </ScrollView>
                </DirectionalLayout>
                <DirectionalLayout
                    ohos:height="80px"
                    ohos:width="match_parent">
                    <Text
                        ohos:height="match_parent"
                        ohos:width="match_parent"
                        ohos:text="图片展示"
                        ohos:text_size="18fp"/>
                </DirectionalLayout>
                <DirectionalLayout
                    ohos:height="500px"
                    ohos:width="match_parent"
                    ohos:orientation="vertical">
                    <ScrollView
                        ohos:height="match_parent"
                        ohos:width="match_parent">
                        <DirectionalLayout
                            ohos:height="match_content"
                            ohos:width="match_parent"
                            ohos:orientation="vertical">
                            <Image
                                ohos:height="match_parent"
                                ohos:width="match_parent"
                                ohos:image_src="$media:fengjing"/>
                            <Image
                                ohos:height="match_parent"
                                ohos:width="match_parent"
                                ohos:image_src="$media:mao"/>
                            <Image
                                ohos:height="match_parent"
                                ohos:width="match_parent"
                                ohos:image_src="$media:gou"/>
                        </DirectionalLayout>
                    </ScrollView>
                </DirectionalLayout>
            </DirectionalLayout>
        </ScrollView>
    </DirectionalLayout>
</DirectionalLayout>

HarmonyOS APP - ScrollView体验与分享-鸿蒙开发者社区

   

HarmonyOS APP - ScrollView体验与分享-鸿蒙开发者社区

代码如下:

 

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">
    <DirectionalLayout
        ohos:height="1800px"
        ohos:width="match_parent"
        ohos:orientation="vertical">
        <ScrollView
            ohos:height="match_parent"
            ohos:width="match_parent">
            <DirectionalLayout
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:orientation="vertical">
                <DirectionalLayout
                    ohos:height="match_content"
                    ohos:width="match_parent">
                    <Image
                        ohos:height="600px"
                        ohos:width="match_parent"
                        ohos:image_src="$media:tupian1"
                        />
                </DirectionalLayout>
                <DirectionalLayout
                    ohos:height="80px"
                    ohos:width="match_parent">
                    <Text
                        ohos:height="match_parent"
                        ohos:width="match_parent"
                        ohos:text="颜色展示"
                        ohos:text_size="18fp"/>
                </DirectionalLayout>
                <DirectionalLayout
                    ohos:height="700px"
                    ohos:width="match_parent"
                    ohos:orientation="vertical">
                    <ScrollView
                        ohos:height="match_parent"
                        ohos:width="match_parent">
                        <DirectionalLayout
                            ohos:height="match_content"
                            ohos:width="match_parent"
                            ohos:orientation="vertical">
                            <DirectionalLayout
                                ohos:height="match_content"
                                ohos:width="match_parent"
                                ohos:orientation="vertical">
                                <Text
                                    ohos:height="80px"
                                    ohos:width="match_parent"
                                    ohos:text="红色"
                                    ohos:text_size="18fp"/>
                                <Image
                                    ohos:height="match_content"
                                    ohos:width="match_parent"
                                    ohos:image_src="$media:red"
                                    />
                            </DirectionalLayout>
                            <DirectionalLayout
                                ohos:height="match_content"
                                ohos:width="match_parent"
                                ohos:orientation="vertical">
                                <Text
                                    ohos:height="80px"
                                    ohos:width="match_parent"
                                    ohos:text="蓝色"
                                    ohos:text_size="18fp"/>
                                <Image
                                    ohos:height="match_content"
                                    ohos:width="match_parent"
                                    ohos:image_src="$media:blue"
                                    />
                            </DirectionalLayout>
                            <DirectionalLayout
                                ohos:height="match_content"
                                ohos:width="match_parent"
                                ohos:orientation="vertical">
                                <Text
                                    ohos:height="80px"
                                    ohos:width="match_parent"
                                    ohos:text="黄色"
                                    ohos:text_size="18fp"/>
                                <Image
                                    ohos:height="match_content"
                                    ohos:width="match_parent"
                                    ohos:image_src="$media:yellow"
                                    />
                            </DirectionalLayout>
                            <DirectionalLayout
                                ohos:height="match_content"
                                ohos:width="match_parent"
                                ohos:orientation="vertical">
                                <Text
                                    ohos:height="80px"
                                    ohos:width="match_parent"
                                    ohos:text="粉色"
                                    ohos:text_size="18fp"/>
                                <Image
                                    ohos:height="match_content"
                                    ohos:width="match_parent"
                                    ohos:image_src="$media:pink"
                                    />
                            </DirectionalLayout>
                            <DirectionalLayout
                                ohos:height="match_content"
                                ohos:width="match_parent"
                                ohos:orientation="vertical">
                                <Text
                                    ohos:height="80px"
                                    ohos:width="match_parent"
                                    ohos:text="绿色"
                                    ohos:text_size="18fp"/>
                                <Image
                                    ohos:height="match_content"
                                    ohos:width="match_parent"
                                    ohos:image_src="$media:grenn"
                                    />
                            </DirectionalLayout>

                        </DirectionalLayout>
                    </ScrollView>
                </DirectionalLayout>
                <DirectionalLayout
                    ohos:height="80px"
                    ohos:width="match_parent">
                    <Text
                        ohos:height="match_parent"
                        ohos:width="match_parent"
                        ohos:text="图片展示"
                        ohos:text_size="18fp"/>
                </DirectionalLayout>
                <DirectionalLayout
                    ohos:height="500px"
                    ohos:width="match_parent"
                    ohos:orientation="vertical">
                    <ScrollView
                        ohos:height="match_parent"
                        ohos:width="match_parent">
                        <DirectionalLayout
                            ohos:height="match_content"
                            ohos:width="match_parent"
                            ohos:orientation="vertical">
                            <Image
                                ohos:height="match_parent"
                                ohos:width="match_parent"
                                ohos:image_src="$media:fengjing"/>
                            <Image
                                ohos:height="match_parent"
                                ohos:width="match_parent"
                                ohos:image_src="$media:mao"/>
                            <Image
                                ohos:height="match_parent"
                                ohos:width="match_parent"
                                ohos:image_src="$media:gou"/>
                        </DirectionalLayout>
                    </ScrollView>
                </DirectionalLayout>
            </DirectionalLayout>
        </ScrollView>
    </DirectionalLayout>
</DirectionalLayout>

完整代码地址:

https://gitee.com/jltfcloudcn/jump_to/tree/master/jltf_ScrollView_component

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
标签
已于2021-3-29 10:45:56修改
3
收藏 1
回复
举报
3条回复
按时间正序
/
按时间倒序
张荣超_九丘教育
张荣超_九丘教育

👍不错

回复
2021-3-27 22:47:30
mb6110e17d60703
mb6110e17d60703

可不可以做一个基于scrollView的下拉刷新,大佬

 

回复
2022-3-5 00:14:31
鸿蒙时代
鸿蒙时代

我看了组件库目录,好像有个现成的这样的组件,我们还没体验到这个来。

回复
2022-3-7 14:04:30
回复
    相关推荐