从列表到详情，没你想的那么简单

前言

本文先假设我们使用的是 vue + vuex + vue-router 的情况来展开讨论，React 全家桶的情况应该类似。

在日常的前端研发中，我们经常会遇到如题的场景：比如从商品列表进入商品详情，从订单列表进入订单详情。先看一个 demo~

看起来是不是还算丝滑流畅，跟客户端效果较为接近~

正文开始

很多同学应该会说，这不是很容易么，用 vue-router + transition 就好啦。

<template>
  <transition name="custom-classes-transition"
    :enter-active-class="`animated ${transitionEnter}`"
    :leave-active-class="`animated ${transitionLeave}`">
    <router-view/>
  </transition>
</template>

<script>
export default {
  data: () => ({
    transitionEnter: '',
    transitionLeave: ''
  }),
  watch: {
    '$route' (to, from) {
      const toDepth = to.path.split('/').length
      const fromDepth = from.path.split('/').length
      if (toDepth < fromDepth) {
        this.transitionEnter = 'slideInLeft'
        this.transitionLeave = 'slideOutRight'
      } else {
        this.transitionEnter = 'slideInRight'
        this.transitionLeave = 'slideOutLeft'
      }
    }
  }
}
</script>

如上所示，slide 的动画使用 animated.css

<style lang='scss'>
$use-slideInLeft: true;
$use-slideInRight: true;
$use-slideOutLeft: true;
$use-slideOutRight: true;
import "node_modules/animate-sass/animate";
.animated {
  top: 0;
  width: 100%;
  height: 100%;
  animation-duration: calc(300ms);
}
.slideOutRight, .slideOutLeft {
  position: fixed;
}
</style>

然后定义好 router 的路径规则，笔者采用 restful 的方式命名。

export default new Router({
  routes: [{ // 商品列表
    path: '/',
    name: 'auctionroom',
    component: () => import('app/auction-room/room/app.vue')
  }, {       // 商品详情
    path: ':activityId',
    name: 'auctionroom-item',
    component: () => import('app/auction-room/item/app.vue')
  }]
})

真这么容易就能完成需求么？

墓碑元素和路由守卫

实际情况是，我们在进入详情页之前，并没有拿到详情的数据！一般都会选择在 vue 组件实例生命周期的 created 钩子，获取对应的后端数据接口。

而这个过程跟 transition 的动画是并行的，会出现右侧页面还未拿到数据就划入屏幕的情况。如大家所想，我们会尽量让数据源表现的像现实世界遇到的，比如有网络延迟等等。

在这种情况发生时，其实是需要放置一个墓碑条目占位在对应位置，等到数据取到后墓碑条目会被实际内容替代。这样设计的原因是，我们希望墓碑元素在被实际数据替代前可以有一个漂亮的过渡，而不是出现那种生硬的或者让人迷失的效果。

先略这个丑陋的墓碑，实际情况的墓碑元素应该是有设计的，在很多新闻客户端如今日头条中会见到~

比起这一种方案，更常见的方式是在导航完成前获取数据，使用 router 的 beforeRouteEnter 钩子。这个方式固然不错，但同样有潜在的问题：

• 在获取数据时，用户会停留在当前的界面，因此建议在数据获取期间，显示一些进度条或者别的指示。如果数据获取失败，同样有必要展示一些全局的错误提醒。
• 不！能！获取组件实例 this，因为当守卫执行前，组件实例还没被创建

vuex + keep-alive 和返回刷新

goDetail () {
  const {activityId} = this
  this.$store.commit('AUCTION_DETAIL', this.$props)
  this.$router.push({
    name: 'auctionroom-item',
    params: { activityId }})
}

分页VS无限滚动

• 无限滚动：彻底了解它
• 无限下拉滚动 VS 分页，究竟该使用哪一个

比较简单的结论可归纳为，页码则适用于那些用户在寻找特定信息的搜索结果列表页以及那些用户的浏览记录比较重要的场合，后者适用于向Twitter等那些用户重在消费无限的信息流而并不常搜寻特定的信息的应用，或者说前者多见于 PC 端，后者多见于 H5 。

如果是页码的模式，那么返回就不再是问题了，因为翻页信息通常会携带在页面url中，返回时我们只需要刷新当前页面的信息就可以了。问题这次的项目是后者，产品同学无法接受进入详情的回退让用户重新回顶部~

引入 keep-alive

要解决这个问题，需要使用 vue 的一个特性 keep-alive，使用原理：

1. 包裹动态组件时会缓存组件实例，而不是销毁
2. keep-alive 内路由切换时会调用 activated 和 deactivated 这两个钩子
3. 套在 router-view 外面，受到影响的范围就是 router-view 里面的路由跳转。

注意事项：

• 使用后会导致 created 可能不被调用，需要把一些逻辑移到 activated
• 针对不需要保留状态的情况，可以在 deactivated 中调用 $destroy()

返回不刷新的问题解决了，但是产品同学又带来了新的问题，比如用户如果在详情页操作了！比如从订单列表进入详情后，更改了订单状态，那么列表页需要刷新这一条数据。

用 vuex 同样可以解决这个问题，在详情页的 deactivated 钩子更新列表中对应的该条数据，同样依赖后端对于详情和列表接口描述订单采用同样的数据格式，代码大致如下：

deactivated () {
  this.$store.commit('AUCTION_LIST_INDEX', this.index, this.$data)
}

最终效果如下：

对于订单这种，只有用户自己操作的数据，用这个方式就能满足需求。但对于商品、竞拍品这类，用户访问时间内有大量数据更新的情况，该方案其实不太完美~

我们或许需要在列表页中缓存当前可视区域的页码，可以使用 vue-scroller，然后在返回时刷新当前可视区域的数据。然而这就完了吗？你或许还是太天真！

无尽滚动的复杂度

我就不做过多的拆解，掘金上有一篇来自 Google 大神的译文和一篇对应的引申：

1. [译] 无尽滚动的复杂度 -- 来自 Google 大神的拆解
2. 设计无限滚动下拉加载，实践高性能页面真谛

据文中观察，在真正产品线上使用这项技术的还比较少。可能是因为实现复杂度和收益比并不很高。但是，淘宝移动端检索页面实现了类似的思想。如下图，

总结

• 还没有人评论，欢迎说说您的想法！

相关课程

云知梦-HTML5网页标签

4590 0元 限免

HTML5网页标签

3920 0元 限免

Web前端页面制作快速入门

5480 9.8元