记得用vue做的一个活动页面
时间：2023-03-30 14:15:36
CSS
前言近日，公司PM提出需求，要求7天内自动获取新上传审核通过的产品固定链接的活动页面。当时想了一下，就用vue做了。感觉效果还不错。在这里分享一下我是怎么做到的，希望能对大家有点帮助。效果图一：页面搭建与优化所谓活动页面的第一步就是裁剪页面。这是2*n页。我这里用的是网格布局（也可以用flex）。我主要说三点：1：关于图片的优化由于后面传进来的图片大小不一样，所以我对图片进行了优化。整个图像在填充框时保持其纵横比代码：.product-imgimg{object-fit:contain;宽度：自动；高度：自动；最大宽度：100%；最大高度：100%；margin:0auto;}为了不让图片感觉突兀，我们可以给图片的框设置一个伪元素。product-img::after{内容：'';位置：绝对；顶部：0；左：0；-webkit-transform:translate3d(0,0,0);转换：translate3d(0,0,0);z-指数：1000；宽度：100%；高度：100%；边界半径：.1rem；background:rgba(85,85,85,0.05);}2：关于页面数据还未加载的优化，因为从后台获取数据需要一定的时间，所以加载时会出现问题数据没有加载（也许只有一秒钟，但这也会给用户带来不好的体验。）我设置的不透明度不加载数据时为0，数据出来时设置opacity:13：关于价格的优化由于设计稿的需求是价格的整数字体大于小数,所以整数和小数用splitt分隔。那么整数的字体比小数点的字体大一号。￥{{String(product.price).split('.')[0]}}.{{String(product.price).split('.')[1]||'0'}}/day
2：获取数据从后台获取数据是非常重要的一个部分，因为后面的部分给出了两个参数，一个是当前页One是一页有多少条数据。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){returnaxios.get(this.api.getActivityInfoById,{params:{start:start,length:length}}).then(function(res){returnres.data.data;});},3:分页所称的活动页肯定要在Page上做分页处理(){constscrollTop=document.documentElement.scrollTop||窗口.pageYOffset||文档.body.scrollTop;constbodyHeight=document.body.offsetHeight;constclientHeight=window.innerHeight;如果（scrollTop+clientHeight
{this.isGetList=false;});},4:下拉刷新优化当数据还在加载时，会显示正在加载，当数据加载完成时，会显示到底部-不要拉出来- 