Vue 移动端总结

Tab栏

使用 Vant 中的 <van-tab></van-tab> 标签来实现 Tab 栏的效果

<van-tabs v-model="active">
  <!-- 当标签超过5个时,标签栏可在水平方向移动,切换时当前标签自动居中 -->
  <van-tab title="标签 1">内容 1</van-tab>
  <van-tab title="标签 2">内容 2</van-tab>
</van-tabs>

如果右侧有一个固定的菜单按钮, 可以使用插槽再给固定定位, 因为固定定位会脱标, 导致最后一个标签被部分覆盖, 可以在Tab栏最后给一个插槽来占位, 再给这个插槽设置 flex-shrink: 0 不参与 flex空间的运算, 自由设置宽高。(菜单插槽和占位插槽要使用相同的插槽, 否则会出现覆盖的问题)

文章列表

为了避免加载过的数据列表重新加载, 可以封装一个文章列表组件, 把频道对象传递给文章列表组件, 然后在频道列表中把文章列表遍历出来 (每个组件都是不同的实例, 所以数据都是独立的)

// Tab 标签页组件默认标签的内容是懒加载的

渲染文章列表, 使用 <van-list></van-list> 组件, 瀑布流滚动加载, 适合展示长列表

通过 loading 和 finished 两个变量控制加载状态， 当组件初始化或滚动到到底部时，会触发 load 事件并将 loading 设置成 true，此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。 若数据已全部加载完毕，则直接将 finished 设置成 true 即可。

load 事件:

• List 初始化后会触发一次 load 事件，用于加载第一屏的数据
• 如果一次请求加载的数据条数较少，导致列表内容无法铺满当前屏幕，List 会继续触发 load 事件，直到内容铺满屏幕或数据全部加载完成

loading 属性: 

• 非加载中，loading 为 false，此时会根据列表滚动位置判断是否触发 load 事件（列表内容不足一屏幕时，会直接触发）
• 加载中，loading 为 true，表示正在发送异步请求，此时不会触发 load 事件

finished 属性:

• 在每次请求完毕后，需要手动将 loading 设置为 false，表示本次加载结束
• 所有数据加载结束，finished 为 true，此时不会触发 load 事件

下拉刷新功能, 主要使用 Vant 中的 PullRefresh 组件

<van-pull-refresh v-model="isLoading" @refresh="onRefresh"></van-pull-refresh>

下拉刷新时会触发 refresh 事件，在事件的回调函数中可以进行同步或异步操作，操作完成后将 v-model 设置为 false，表示加载完成。

记录滚动位置

在切换 Tab栏标签时, 无法记录上一次滚动条的位置, 切回来无法看到之前的内容

可以给每个标签的列表容器设置单独的滚动条, 再给一个固定的高度, 这样切换不同标签时, 滚动位置就不会相互影响

文章列表项

列表项可以使用 Cell 单元格组件

因为列表项有不同的样式, 通过 v-if 判断每项中图片的数量, 来显示不同的布局