开始

把这个库立面涉及的东西都讲一遍。
image.png

防止图片闪一下
image.png

scroll-row用法

官方文档有写。
image.png
scroll-view主要是争对x轴的
image.png
打一个官方提供的组件。
image.png
自动生成的代码
image.png

image.png
理想状态下，下面是可以更像滚动的
image.png
加上边框，让大家看的更清楚一些
image.png
每一个都占一行。view默认就是占一行。
image.png
scroll-item加载上面scroll-row-item加到下面。
image.png
这个时候就占一行。
image.png
并且可以横向的滚动
image.png

预设好颜色的变量。
image.png
这些颜色在下面都会用到
image.png
定位和上下左右的都是0。
image.png
宽和高
image.png
字体大小
image.png
行高
image.png
居中 居左 居右
image.png

栅格布局

栅格布局。这里并不是一个标准的栅格布局，后面会交给他家怎么去使用。
image.png
比如这个地方要分为1行5个元素。
image.png

image.png

一行5列，共分为两列。
image.png
因为我们是1行5列， 20可以被除尽。
image.png
总共划分为20个区域，20/5=4 那么每份就是4
image.png

image.png
这样就是两行了
image.png

image.png
加一点内边距
image.png
p-2就是内边距都是20upx
image.png
文字都居中
image.png

image.png
图标和文字。
image.png
py-2是y轴的方向。
image.png

image.png

最终效果

只需要把图标和文字换一下，就实现了这个效果。
image.png

image.png

结束