具体步骤可查看上面三个视频：
视频一
视频二
视频三
显示成果：
能够左右滑动
布局中的代码
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_content"
ohos:width="match_parent"
ohos:background_element="$graphic:main_ability_title_background"
ohos:orientation="vertical">
<include
ohos:id="$id:app_bar"
ohos:height="match_content"
ohos:width="match_parent"
ohos:layout="$layout:app_bar_layout"/>
<PageSlider
ohos:id="$+id:page_view"
ohos:height="match_content"
ohos:width="match_parent"/>
<PageSliderIndicator
ohos:id="$+id:page_indicator"
ohos:height="$float:page_indicator_height"
ohos:width="match_parent"
ohos:bottom_margin="$float:margin_page_slider_indicator"
ohos:layout_alignment="center"
ohos:top_margin="$float:margin_page_slider_indicator"/>
<ListContainer
ohos:id="$+id:list_view"
ohos:height="match_content"
ohos:width="match_parent"
ohos:background_element="$graphic:item_background"
ohos:top_margin="$float:breadth_common"/>
</DirectionalLayout>显示成果：
点击其中任何的一条信息都能够进入下一个页面
<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:id="$+id:parent_layout"
ohos:height="match_parent"
ohos:width="match_parent">
<ScrollView
ohos:height="match_parent"
ohos:width="match_parent">
<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:bottom_padding="70vp"
ohos:orientation="vertical">
<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:alignment="vertical_center"
ohos:orientation="horizontal">
<Image
ohos:id="$+id:image"
ohos:height="50vp"
ohos:width="50vp"
ohos:image_src="$media:huawei"
ohos:layout_alignment="left"
ohos:left_margin="10vp"
ohos:scale_mode="stretch"/>
<Text
ohos:id="$+id:title_icon"
ohos:height="match_content"
ohos:width="match_content"
ohos:text="$string:title"
ohos:text_size="20fp"
ohos:weight="1"/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:right_margin="10vp"
ohos:text="$string:read"
ohos:text_size="10fp"/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:right_margin="20vp"
ohos:text="$string:like"
ohos:text_size="10fp"/>
</DirectionalLayout>
<Text
ohos:id="$+id:title_text"
ohos:height="match_content"
ohos:width="match_parent"
ohos:left_margin="20vp"
ohos:max_text_lines="4"
ohos:multiple_lines="true"
ohos:right_margin="20vp"
ohos:text="$string:original_title"
ohos:text_color="#000000"
ohos:text_size="18fp"
ohos:top_margin="10vp"/>
<Text
ohos:id="$+id:title_content"
ohos:height="match_content"
ohos:width="match_parent"
ohos:left_margin="20vp"
ohos:multiple_lines="true"
ohos:right_margin="20vp"
ohos:text_alignment="center_horizontal"
ohos:text_color="#708090"
ohos:text_size="16fp"
ohos:top_margin="5vp"/>
<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:orientation="horizontal">
<Image
ohos:id="$+id:image_content1"
ohos:height="100vp"
ohos:width="0vp"
ohos:image_src="$media:content"
ohos:layout_alignment="center"
ohos:left_margin="20vp"
ohos:right_margin="2vp"
ohos:top_margin="10vp"
ohos:weight="1"/>
<Image
ohos:id="$+id:image_content2"
ohos:height="100vp"
ohos:width="0vp"
ohos:image_src="$media:news_big_5g"
ohos:layout_alignment="center"
ohos:left_margin="10vp"
ohos:right_margin="2vp"
ohos:top_margin="10vp"
ohos:weight="1"/>
<Image
ohos:id="$+id:image_content3"
ohos:height="100vp"
ohos:width="0vp"
ohos:image_src="$media:content_news"
ohos:layout_alignment="center"
ohos:left_margin="2vp"
ohos:right_margin="20vp"
ohos:top_margin="10vp"
ohos:weight="1"/>
</DirectionalLayout>
</DirectionalLayout>
</ScrollView>
<Component
ohos:height="0.5vp"
ohos:width="match_parent"
ohos:above="$+id:bottom_layout"
ohos:background_element="#EAEAEC"
/>
<DirectionalLayout
ohos:id="$+id:bottom_layout"
ohos:height="50vp"
ohos:width="match_parent"
ohos:align_parent_bottom="true"
ohos:alignment="vertical_center"
ohos:background_element="#ffffff"
ohos:left_padding="20vp"
ohos:orientation="horizontal"
ohos:right_padding="20vp"
>
<TextField
ohos:id="$+id:text_file"
ohos:height="30vp"
ohos:width="160vp"
ohos:background_element="$graphic:corner_bg_comment"
ohos:hint="$string:comment"
ohos:left_padding="5vp"
ohos:right_padding="10vp"
ohos:text_alignment="vertical_center"
ohos:text_size="15vp"/>
<Image
ohos:id="$+id:button1"
ohos:height="20vp"
ohos:width="20vp"
ohos:image_src="$media:message_icon"
ohos:left_margin="20vp"/>
<Image
ohos:id="$+id:button2"
ohos:height="20vp"
ohos:width="20vp"
ohos:image_src="$media:collect_icon"
ohos:left_margin="20vp"/>
<Image
ohos:id="$+id:button3"
ohos:height="20vp"
ohos:width="20vp"
ohos:image_src="$media:like_icon"
ohos:left_margin="20vp"/>
<Image
ohos:id="$+id:button4"
ohos:height="20vp"
ohos:width="20vp"
ohos:image_src="$media:share_icon"
ohos:left_margin="20vp"/>
</DirectionalLayout>
</DependentLayout> 显示成果：
搁置一些内容 能够高低滑动
布局中的代码
<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="$float:list_item_height"
ohos:width="match_parent"
ohos:bottom_padding="$float:list_item_bottom_padding"
ohos:top_padding="$float:list_item_top_padding"
>
<DirectionalLayout
ohos:id="$+id:head_image_layout"
ohos:height="match_content"
ohos:width="match_content"
ohos:right_margin="$float:list_item_profile_picture_right_margin"
ohos:vertical_center="true"
>
<Image
ohos:id="$+id:list_left_image"
ohos:height="match_content"
ohos:width="match_content"
ohos:image_src="$media:ori_star"
/>
</DirectionalLayout>
<DirectionalLayout
ohos:id="$+id:left_layout"
ohos:height="match_content"
ohos:width="match_content"
ohos:bottom_margin="$float:list_item_double_line_bottom_margin"
ohos:end_of="$id:head_image_layout"
ohos:orientation="vertical"
ohos:vertical_center="true"
>
<Text
ohos:id="$+id:list_main_text"
ohos:height="match_content"
ohos:width="match_content"
ohos:alpha="0.9"
ohos:multiple_lines="true"
ohos:text="$string:Double_line_list_item"
ohos:text_alignment="vertical_center|left"
ohos:text_size="$float:list_item_main_text_size"
/>
<Text
ohos:id="$+id:list_aux_text"
ohos:height="match_content"
ohos:width="match_content"
ohos:alpha="0.6"
ohos:multiple_lines="true"
ohos:text="$string:Auxiliary_text"
ohos:text_alignment="vertical_center|left"
ohos:text_size="$float:list_item_aux_text_size"
/>
</DirectionalLayout>
<DirectionalLayout
ohos:id="$+id:right_layout"
ohos:height="match_content"
ohos:width="match_parent"
ohos:alignment="right"
ohos:end_of="$id:left_layout"
ohos:orientation="horizontal"
ohos:vertical_center="true"
>
<Text
ohos:id="$+id:list_right_text"
ohos:height="match_content"
ohos:width="match_content"
ohos:alpha="0.6"
ohos:multiple_lines="true"
ohos:right_margin="4vp"
ohos:text="$string:Right_text"
ohos:text_size="$float:list_item_right_text_size"
/>
<Image
ohos:id="$+id:list_right_image"
ohos:height="match_content"
ohos:width="match_content"
ohos:image_src="$media:right_arrow"
ohos:layout_alignment="vertical_center"
/>
</DirectionalLayout>
<Component
ohos:height="$float:list_item_divider_height"
ohos:width="match_parent"
ohos:alpha="0.3"
ohos:background_element="$graphic:item_divider"
ohos:below="$id:left_layout"
ohos:end_of="$id:head_image_layout"
/>
</DependentLayout>残缺代码地址：
https://gitee.com/jltfcloudcn…
原文链接：https://developer.huawei.com/…
原作者：蛟龙腾飞