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

前言

最近，公司的PR提了一个需求 自动获取七天新上传的并且审核通过的商品做成固定的链接的一个活动页面。当时想了一想就用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") {								 
 1/2    1 2 下一页 尾页