认真看完这篇文章,你将会收获
文本组件,按钮组件,图片组件的基本使用
Flex,Row 和 Column 布局容器
底部导航栏Tabs组件的使用
if/else条件渲染
ForEach循环渲染
@State...})
3.2 实现点击底部导航栏按钮进行页面跳转
在3.1 中, 我们已经实现了三个自定义的按钮组件....并且给每个按钮绑定了方法, 即点击的时候修改index状态的值. 同时对于一些UI组件有了一定的了解.(其实和css大差不差,就是写的形式发生了变化.)...然后再去我们定义好了三个组件的onclick下面 加入这句话, 点击每个按钮时,会将 this.index 设置为对应标签页的索引值,并通过 this.controller.changeIndex(this.index...先看一下
分析一下布局结构
整体是纵向布局
中间那个显示区域,给了固定宽高, 采用flex布局, warp等等
包裹按钮的大盒子是flex 横向布局
这里我主要说一下转盘, 哦 不对, 是各个小方格的实现吧