具体步骤可查看上面三个视频：
视频一
视频二
视频三
显示成果：
能够左右滑动
布局中的代码
<?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/...
原作者：蛟龙腾飞