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 事件: