模拟百度翻页

做wikix项目的时候，要自己写一个翻页插件，整个架构是基于vue的，所以用vue来写一个分页插件
分析一下百度分页插件的特性：

1. 如果页数小于5，当前是几页就是几页

2. 如果页数大于等于6，当前页永远显示在第6个位置

3.那个脚印的话， 就懒得做了

写一个生成翻页列表的函数， 在初始化页面的时候，调用一次， 然后每次更新当前页面索引的时候， 调用一次

generatepageList(this.page) {
  let tpl = []
  let tpr = []
  if(page < 6){
    return [1,2,3,4,5,6,7,8,9,10]
  } else {
    for (let i = 5; i > 0; i--){
      tpl.push(page - i)
    }
    for (let j = 1; j < 5; j++){
      tpr.push(page + j)
    }
    tpl.push(page)
    return tpl.concat(tpr)
  }
}

监听搜索关键字的改变，一旦发生改变， 调用函数

 watch: {
      key() {
        // key 值改变， 请求第一页的数据
        this.getData(this.key, 1)
        this.pageList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
        this.generatePage(this.page);
      },
      page () {
        // 如果 page 改变， 请求第 page 页的数据
        this.getData(this.key, this.page)
        this.generatePage(this.page);
        // 让页面滚回顶部
        window.scrollTo(0, 0)
      }
    }

然后。。。 就完美的实现了。。。