最近,公司的公关提了一个需求自动获取七天新上传的并且审核通过的商品做成固定的链接的一个活动页面。当时想了一想就用vue做了,感觉效果还行,在这分享一下我是如何做的希望对大家有一点点帮助。
<强>附上线上地址
在线预览:新品租赁页
<强>
所谓的活动页首先第一步肯定是把页面切出来,这里就是2 * n页面我这里用的就是网格布局(也可以用flex)我主要讲三个点:
<强> 1:关于图片的优化
由于后段传过来的图片大小不一样,我就对图片做了做了一下优化。整个图片在填充盒子的同时保留其长宽比
代码:
.product-img img {
object-fit:包含;
宽度:汽车;
高度:汽车;
max-width: 100%;
max-height: 100%;
保证金:0汽车;
}
为了不让图片觉得突兀我们可以给图片的盒子设置一个伪元素
{后.product-img::
内容:”;
位置:绝对的;
上图:0;
左:0;
-webkit-transform: translate3d (0, 0, 0);
变换:translate3d (0, 0, 0);
z - index: 1000;
宽度:100%;
高度:100%;
border - radius: .1rem;
背景:rgba (85、85、85、0.05);
}
<强> 2:关于页面数据还没加载出来的优化
由于从后台获取数据需要一定的时间当数据没加载进来的时候会出现问题(也许就是一秒但这也会给用户带来不好的体验感)。
& lt; div类=叭萜鳌?类=" productList。长度& # 63;“展示”:“在
当数据没加载的时候我就设置不透明度为0,当数据出来的时候就设置不透明度:1
<强> 3:关于价格的优化
由于设计稿的需求是价格的整数的字体要比小数要大,所以就把整数和小数分别用泼分隔来了。然后在给整数的字体比小数点的字体大一号就行了。
& lt; div类=安芳鄹瘛痹冢? lt;跨类=靶滦耸谐 痹趝{字符串(product.price) .split (' . ') [0]}} & lt;/span>。{{字符串(product.price) .split(' . ')[1] | | ' 0 '}}/天& lt;/div>
从后台获取数据是很重要的一部分由于后段给了二个参数一个是当前页一个是一个页面有多少条数据。
getList (cb) {
this.getActivityInfoById (this.curPage this.pageSize)。((data=https://www.yisu.com/zixun/{})=> {
这一点。总=data.total;
如果(这一点。curPage * this.pageSize)>=Ｗ? &文档。readyState==巴瓿伞?{
这一点。isMaxPage=true;
}
这一点。productList=this.productList.concat(数据。行| | []);
cb,,cb(数据)
})
}
getActivityInfoById:函数(开始、长度){
返回axios
. get (this.api决定。getActivityInfoById, {
参数:{
启动:启动,
长度:
}
})
不要犹豫(函数(res) {
返回res.data.data;
});
},
所谓的活动页肯定要做分页处理
onPage () {
const scrollTop=document.documentElement。scrollTop | |窗口。pageYOffset | | document.body.scrollTop;
const bodyHeight=document.body.offsetHeight;
const clientHeight=window.innerHeight;
如果(scrollTop + clientHeight & lt;bodyHeight) {
返回;
}
如果(this.isGetList)返回;
如果这一点。总& lt;这一点。curPage * this.pageSize) {
返回;
}
this.curPage + +;
这一点。isGetList=true;
this.getList(()=祝辞{
这一点。isGetList=false;
});
},
当数据还在加载中显示加载,当数据加载完成是显示扯到底了
& lt; div类=耙辰拧眝=癷sMaxPage祝辞,不要扯了已经扯到底了& lt;/div>
& lt; div类=耙辰拧眝=? isMaxPage”祝辞-加载& lt;/div>
由于这个活动页图片有点多所以用了懒加载
lazyLoad:函数(){
var seeHeight=document.documentElement.clientHeight;//可见区域高度
var一=document.getElementsByTagName (img);
我对(var=this.lazyLoadIndex;我& lt;imgs.length;我+ +){
如果(
一个[我].getBoundingClientRect ()。顶级& lt;seeHeight,,
一个[我].dataset。src,,
一个[我].getAttribute (src) !==一个[我].dataset.src
){
一个[我]。setAttribute (“src”,一个[我].dataset.src);
this.lazyLoadIndex + +;
}
}
},
