前言

最近公司的PR提出了一个活动页面，需要在七天内自动获取新上传的产品，并将审核通过的产品做成固定链接。当时想了想就用vue做了，感觉效果还可以。分享一下我是怎么做的，对大家都有帮助。

翻译

附上在线地址

在线预览：新产品租赁页面

1.页面构建和优化

所谓的活动页面的第一步必须是剪切页面。这是2*n页。我在这里使用网格布局(你也可以使用flex)。我主要谈三点：

1:关于图片优化

因为后面部分发的图片大小不一，所以我对图片做了一些优化。整个图片填满了盒子，同时保持了它的长宽比

代码：product-img img { object-fit : }容器；宽度：自动；height: auto最大宽度：100%；最大高度：100%；margin: 0 auto}为了不使图片感觉突兀，我们可以为图片框设置一个虚拟元素。{ content : }之后的产品-img :绝对位置：top : 0；left : 0；-web kit-transform : translate 3d(0，0，0)；transform: translate3d(0，0，0)；z-index : 1000；宽度： 100%；高度： 100%；border-radius : 1 rem；背景： rgba(85，85，85，0.05)；}2:关于页面数据尚未加载的优化。

因为从后台获取数据需要一定的时间，当数据没有加载时，会出现问题(可能只是一秒钟，但也会给用户带来不好的体验。)

div class=' container ' : class=' ProductList . length '？Show': ' ' '我在未加载数据时将不透明度设置为0，在数据出来时将不透明度设置为1。

3:关于价格优化

因为设计稿的要求是整数的字体比小数大，所以整数和小数是用分隔线分开的。然后只给整数的字体比小数点的字体大一号。

/div 2 class=' product-price 'span class=' em ' { string(product . price)。拆分('.')[0]}}/span。{{string (product.price))。拆分('.') [1] | |' 0'}}}

从后台获取数据非常重要，因为后面部分给出了两个参数，一个是当前页面，另一个是一个页面有多少条数据。

getList(CB){ this . getactivityinfobyid(this . cur page，this.pageSize)。然后((数据={ })={ 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 :函数(开始，长度){ return axios。get(this . API . getactivityinfobyid，{ params: { start: start，length: length } })。然后(函数(RES){ return RES . data . data；});}，3:分页

所谓的活动页面必须分页

onPage(){ const scroll top=document . document element . scroll top | | window . pageyoffset | | document . body . scroll top；const body height=document . body . offset theight；const client height=window . inner height；if(scroll top client height body height){ return；} if(this.isGetList)返回；if(this . total this . cur page * this . page size){ return；} this.curPagethis.isGetList=truethis . getlist(()={ this . isgetlist=false；});}，4:下拉刷新优化

当数据仍在加载时，显示加载，当数据被加载时，显示被拉到最后

div class=' footer ' v-if=' is expage '-不要谈论它。都结束了-/divdiv class='footer' v-if='！ismexpage '-loading-/div 5:惰性加载

因为这个活动页面上有很多图片，所以我使用了延迟加载

lazyLoad:函数(){ var seeHeight=document . document element . client height；//可见区域高度vari MGS=document . getelementsbytagname(' img ')；for(var I=this . LazyLoadindex；i imgs.lengthi ) { 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}}}，摘要

作为即将毕业的大四学生，这是我来公司实习的活动页面，希望能帮助大家互相学习，共同进步。当然，也有一些缺点。请给我们你的建议。码字不容易。希望大家能赞一赞。前面的路很长，所以我们可以和你分享。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。