商品列表分页实现

实现的功能是通过点击price，可以对获取的商品进行升序或降序显示；
向下滚动，可以继续获取到第二页第三页的商品列表。

服务器端，在server/routers/goods.js中定义分页代码

router.get("/",function(req,res,next){
  // 定义分页
  let page = parseInt(req.param('page'));  // 页码
  let pageSize = parseInt(req.param('pageSize'));  // 每页展示的商品数量
  let sort = parseInt(req.param('sort'));  // 排序形式；1：正序。-1：倒序
  let skip = (page-1)*pageSize;  // 每页要显示的商品的序号，用于跳过显示过的
  let params ={};  // 使用查询操作符指定查询条件
  let goodsModel = Goods.find(params).skip(skip).limit(pageSize);
  goodsModel.sort({'salePrice':sort});
  goodsModel.exec(function (err,doc) {
    if(err){
      res.json({
        status:"1",
        msg:err.mssage
      })
    }else{
      res.json({
        status: '0',
        msg:'',
        result:{
          count:doc.length,
          list:doc
        }
      });
    }
  });
});

前端，在src/views/GoodsList.vue中设定以价格排序显示

// data()中添加参数
data(){
        return{
          sortFlag:1,
          page:1,
          pageSize:8
        }
}
// 设置获取商品参数的函数
getGoodsList(){
        var param = {
            page:this.page,
            pageSize: this.pageSize,
            sort :this.sortFlag?1:-1
          }
          axios.get("/goods",{params:param}).then((response)=>{
            var res = response.data;
            this.goodsList = res.result;
          })
},
// 定义商品排序函数
sortGoods(){
          this.sortFlag = !this.sortFlag;
          this.page = 1;
          this.getGoodsList();
}

// template中添加点击事件
<a href="javascript:void(0)" class="price" @click="sortGoods">
            Price
            <svg class="icon icon-arrow-short">
              <use xlink:href="#icon-arrow-short"></use>
            </svg>
          </a>

安装无限滚动插件
cnpm install vue-infinite-scroll --save
使用方式：
使用v-infinite-scroll启用无限滚动，并使用infinite-scroll- *属性定义其选项。当元素的底部到达视口的底部时，将执行指定为v-infinite-scroll值的方法。

// <template>中
<div v-infinite-scroll =“ loadMore” infinite-scroll-disabled =“ busy” infinite-scroll-distance =“ 10”>
  加载中...
</ div>

// methods模块中
loadMore(){
          this.busy = true;  // 如果此属性的值为true，则将禁用无限滚动。
          setTimeout(()=>{
            this.page++;
            this.getGoodsList(true);
          },1000);
        }
// 重新定义getGoodsList()方法
getGoodsList(flag){
          var param = {
            page:this.page,
            pageSize: this.pageSize,
            sort :this.sortFlag?1:-1
          }
          axios.get("/goods",{params:param}).then((response)=>{
            var res = response.data;
            if(res.status=='0'){
              if(flag){  // 设定flag来判断是否是第一次获取goodsList
                this.goodsList = this.goodsList.concat(res.result.list);
                if(res.result.count == 0){  // 当获取完商品列表后，禁用滚动获取
                  this.busy = true;  // 禁用
                }else{
                  this.busy =false;
                }
              }else{
                this.goodsList = res.result.list;
                this.busy = false;
              }
            }else{
              this.goodsList = [];
            }
          })
        }