首先首页的内容部分
image.png
首先我们先把内容放开，循环100个数据来看下
image.png
tab栏也跟着滚动了
image.png

设置tab栏不滚动

滚动的内容是第一个内容到tabBar的上面
image.png
外层多包裹一个view的父元素，防止我们里面内容滚动不了或者样式的问题。
image.png

样式

首先我们加一个page，她是一个百分之百的高度
image.png
设置flex布局
image.png
这里改成home
image.png
再给home加上flex布局
image.png
让我们的内容可以垂直的去排列
image.png
设置flex为1，然后加上一个红色的边框看下效果。
image.png
红色边框，占据了我们页面的高度
image.png
scroll加上样式
image.png
image.png
网上托，页面已经不能滚动了
image.png
我们需要给scroll的view一个高度，因为它的高度是整体撑开的
image.png
高度100%，布局是flex，然后垂直排列。
image.png
这样中间内容就可以滚动了。tab栏也固定了
image.png

封装组件

滚动这一部分的内容可以做成一个组件。
image.png
新建组件
image.png
复制过去
image.png
这里加一个插槽，可以把内容通过插槽放进来。
image.png
把样式复制过来
image.png
引用组件
image.png
image.png
image.png

卡片

声明一个组件实现列表卡片

image.png
创建组件
image.png
循环5个list-card
image.png
image.png

实现基础的卡片视图

左边是一个图片。mode格式为aspcetFill会完全填充我们的图片。
image.png
右侧是我们的图片内容
image.png
标题和文章的简介
image.png
这样就实现了基础卡片的简单布局
image.png
image.png

添加样式

首先是卡片的样式。布局是flex，padding和margin 上下左右都是10
image.png
圆角5px。阴影，5px的模糊效果，1px的扩散值，
image.png
image.png

样式被挤到屏幕外面了。
image.png
首页内加一个溢出隐藏
image.png
图片的样式，圆角。图片超出隐藏，
image.png
需要给下面的image设置宽高，这样我们的图片才能正常的去显示。
image.png
image.png
图片没显示出来，改成绝对路径
image.png
左边图片可以正常的显示了。
image.png
image.png
应相对路径，再加上一层， 就可以正常的显示
image.png
image.png
还是改回绝对路径
image.png
还是flex布局，垂直方向排列。
image.png
紧挨着左边图片。
image.png
左边加上点距离
image.png
这里用了100%的宽度后，图片就有可能被挤压
image.png
挤压后，我们需要使用一个
image.png
这样图片就正常了
image.png
调整文字大小颜色等。
image.png
image.png
字体改细一点400
image.png
image.png
左边一个标签，右边是浏览人数
image.png
没有样式的情况下是这样的
image.png
flex布局，希望左右两边对齐
image.png
指定字体大小。
image.png
实现label，让label也是flex布局，横向排列。
label下面再加一个label 的item元素。
image.png

image.png
浏览人数样式
image.png

前端和上面的标题距离需要增加一点
image.png
image.png
这样上下的内容就对齐了。
image.png
调整label 的颜色。
image.png
image.png

文字内容多了显示点点点

文字的溢出隐藏。

多复制一些内容
image.png
这样标题就溢出了
image.png
希望到两行的时候就显示点点点
首先把文字放在标签里面。
image.png
然后再来实现title的溢出隐藏
image.png
image.png
这样就可以实现文字的溢出隐藏显示省略号
image.png
注意这里的单词拼错了
image.png
image.png

以上就是我们的基础卡片。

结束