当前位置：首页 > news >正文

6、构建更加丰富的页面

news 2025/7/7 15:50:16

构建列表页面
- List接口介绍
- List属性介绍
- List属性设置：listDirection
- List属性设置：lanes
- List属性设置：divider
- List属性设置：scrollBar
- List、ListltemGroup和Listltem组件关系
构建丰富的页面
- Swiper组件介绍
- Swiper接口介绍
- SwiperController的使用
- Swiper属性介绍
- - Swiper属性介绍：循环播放
  - Swiper属性介绍：自动轮播
  - Swiper属性介绍：导航点样式
- Swiper构建轮播
- Grid组件简介
- Grid组件：设置行列数量与占比
- Grid组件：在网格布局中显示数据
- Grid组件：设置行列间距
- Scroll组件接口简介
- Scroller的使用
- Scroll属性介绍
- Scroll构建可滚动页面
使用Tabs构建页签
- 认识Tabs构建页签
- Tabs接口介绍
- Tabs属性介绍
- Tabs与TabContent的关系
- 设置TabBar位置和排列方向
- TabBar属性介绍
- 构建自定义TabBar
使用Navigation实现导航
- Navigation介绍
- Navigation路由导航
- 导航页Navigation和子页NavDestination
- RouterMap路由表
- NavPathStack路由栈
- - 页面跳转
- 实现页面跳转开发流程

构建列表页面

在这里插入图片描述

List接口介绍

在这里插入图片描述

一个是向下滚动50vp，一个是滚动到最顶部

在这里插入图片描述

List属性介绍

在这里插入图片描述

List属性设置：listDirection

在这里插入图片描述

List属性设置：lanes

在这里插入图片描述

List属性设置：divider

通过startMargin和endMargin分别设置分隔线和列表侧边起始端和结束端的距离
在这里插入图片描述

List属性设置：scrollBar

在这里插入图片描述

List、ListltemGroup和Listltem组件关系

List的子组件必须是ListtemGroup或者ListItem，Listltem和ListltemGroup也必须配合List来使用
在这里插入图片描述

构建丰富的页面

在这里插入图片描述

Swiper组件介绍

在这里插入图片描述

Swiper接口介绍

在这里插入图片描述

SwiperController的使用

在这里插入图片描述

Swiper属性介绍

在这里插入图片描述

Swiper属性介绍：循环播放

如果设置为false，则在第一页或最后一页时，无法继续向前或者向后切换页面
在这里插入图片描述

Swiper属性介绍：自动轮播

在这里插入图片描述

Swiper属性介绍：导航点样式

在这里插入图片描述

Swiper构建轮播

在这里插入图片描述

Grid组件简介

Grid子组件必须是GridItem组件
在这里插入图片描述

Grid组件：设置行列数量与占比

Grid组件提供了rowsTemjpllate和coumnsTemplate属性，用于设置网格布局行列数量以及尺寸占比，它们是一个由多个空格和数字加 fr 间隔拼接而成的字符串，fr 的个数即网格布局的行或列数，fr 前面的数值大小则用于计算该行或者该列在网格布局上宽度的占比，最终决定该行或者该列的宽度

在这里插入图片描述