点击查看更多在前端页面中运用特别多，但是做好里面的细节方面还是需要揣摩一下
我们一步一步开始这里面的情况和步骤吧

首先，我们来看一个最简单的情况： 一次性请求完所有的数据

1. 这样的情况，会一次性请求所有的数据回来，直接将全部数据遍历到列表
2. 接着就是根据需要 " 设定父元素的高度并且overflow达到遮拦的效果 " 并且设定一个button的点击事件，点击之后把高度设定去除
3. 去除高度（{height: auto}）之后就把 “点击查看更多” 字眼换成 “收起” 


另外，如果点击收起，浏览器会记录当前的scrollTop
也就是说点击收起之后scrollTop会变成之前没有收起时候的scrollTop（显示效果就是会定位到屏幕更加下方的位置）
会造成不美观也不符合用户习惯

解决办法： 
所以这边我们需要在点击 “查看更多” 的时候记录下当前页面的scrollTop并且赋值给一个变量存放。
再次点击 “收起” 按钮的时候我们把scrollTop赋值为刚刚存放的变量就能还原之前的操作啦

Expand () {
        if (this.viewMore === false) {  // 判断当前用户有没有展开
          this.viewMore = true
          // 收起回到用户点击查看更多时的定位
          document.body.scrollTop = this.scroll
          // alert(this.scroll)
        } else {
          // 记录下来用户滑动到的位置，下面会收起到这个位置
          let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
          this.scroll = scrollTop
          // alert(this.scroll)
          this.viewMore = false
        }
      }

image.png

接着我们来看需要数据请求的查看更多

1. 这样的情况，会比较类似分页，第一次请求数据，然后第二次继续请求数据之后将两次的数据进行拼接
2. 因为排行榜会实时更新，所以我们请求的数据需要保证之前分页请求的数据是不变的，每次请求回来之后我们提供列表最后那个的id，后台请求这个id后面的数据，当然这也是不准确的。
3. 接下来的操作其实是跟上面的类似