记一次用vue做的活动页的方法步骤

this.isMaxPage = true;
}
this.productList = this.productList.concat(data.rows || []);
cb && cb(data)
})
}

 getActivityInfoById: function(start, length) {
    return axios
     .get(this.api.getActivityInfoById, {
      params: {
       start: start,
       length: length
      }
     })
     .then(function(res) {
      return res.data.data;
     });
   },

3:分页

所谓的活动页肯定要做分页处理

onPage(){
    const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
    const bodyHeight = document.body.offsetHeight;
    const clientHeight = window.innerHeight;
    if(scrollTop + clientHeight < bodyHeight){
     return;
    }
    if(this.isGetList) return;
    if(this.total < this.curPage * this.pageSize){
     return;
    }
    this.curPage++;
    this.isGetList = true;
    this.getList(()=>{
     this.isGetList = false;
    });
   },

4:下拉刷新的优化

当数据还在加载中显示loading，当数据加载完成是显示扯到底了

<div class="footer" v-if="isMaxPage">- 不要扯了 已经扯到底了 -</div>
<div class="footer" v-if="!isMaxPage">- loading -</div>

5：懒加载

由于这个活动页图片有点多 所以用了懒加载

  lazyLoad: function() {
    var seeHeight = document.documentElement.clientHeight; // 可见区域高度
    var imgs = document.getElementsByTagName('img');
    for (var i = this.lazyLoadIndex; i < imgs.length; i++) {
     if (
      imgs[i].getBoundingClientRect().top < seeHeight &&
      imgs[i].dataset.src &&
      imgs[i].getAttribute('src') !== imgs[i].dataset.src
     ) {
      imgs[i].setAttribute('src', imgs[i].dataset.src);
      this.lazyLoadIndex++;
     }
    }
   },

总结

作为一个即将毕业的大四学生，这是我来公司实习做的活动页，希望可以帮助大家，互相学习，一起进步。当然也有一些不足之处，请大家多多指教。码字不容易，希望大家点个赞。前端路漫漫，与君共勉之。