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
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐