媒介

近来，公司的PM提了一个需求 自动猎取七天新上传的而且考核经由过程的商品做成牢固的链接的一个运动页面。当时想了一想就用vue做了，以为结果还行，在这分享一下我是怎样做的 愿望对人人有一点点协助。

结果图

1：页面的构建及优化

所谓的运动页 起首第一步一定是把页面切出来，这里就是2*n页面 我这里用的就是grid规划（也能够用flex）我主要讲三个点：

1:关于图片的优化

因为后段传过来的图片大小不一样，我就对图片做了做了一下优化 。全部图片在添补盒子的同时保存其长宽比
代码：

 .product-img img {
  object-fit: contain;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
}

为了不让图片以为高耸 我们能够给图片的盒子设置一个伪元素

.product-img::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 1000;
  width: 100%;
  height: 100%;
  border-radius: .1rem;
  background: rgba(85, 85, 85, 0.05);
}

2:关于页面数据还没加载出来的优化

因为从背景猎取数据须要一定的时刻 当数据没加载进来的时刻会出现问题（或许就是一秒但这也会给用户带来不好的体验感。）

<div class="container" :class="productList.length ? 'show': ''">

当数据没加载的时刻我就设置opacity为0，当数据出来的时刻就设置opacity：1

3:关于价钱的优化

因为设想稿的需求是价钱的整数的字体要比小数要大，所以就把整数和小数分别用spilt分开来了。然后在给整数的字体比小数点的字体大一号就好了。

<div class="product-price">￥<span class="em">{{String(product.price).split('.')[0]}}</span>.{{String(product.price).split('.')[1]||'0'}}/天</div>

2：猎取数据

从背景猎取数据是很主要的一部分 因为后段给了二个参数 一个是当前页 一个是一个页面有若干条数据。

      getList(cb){
        this.getActivityInfoById(this.curPage,this.pageSize).then((data = {})=>{
          this.total = data.total;
          if(( this.curPage * this.pageSize) >= this.total && document.readyState == "complete") {
            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++;
          }
        }
      },

总结

作为一个行将毕业的大四门生，这是我来公司练习做的运动页，愿望能够协助人人，互相学习，一同提高。固然也有一些不足之处，请人人多多指教。码字不容易，愿望人人点个赞。前端路漫漫，与君共勉之。