记一次用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") {
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++;
}
}
},
总结
作为一个即将毕业的大四学生，这是我来公司实习做的活动页，希望可以帮助大家，互相学习，一起进步。当然也有一些不足之处，请大家多多指教。码字不容易，希望大家点个赞。前端路漫漫，与君共勉之。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Vue3新特性之在Composition API中使用CSS Modules
这篇文章主要介绍了Vue3新特性之在Composition API中使用CSS Modules,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了部属vue项目,访问路径设置非根,显示白屏的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了解决vue中less的使用问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-11-11
这篇文章主要介绍了mpvue全局引入sass文件的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
使用vue和datatables进行表格的服务器端分页实例代码
本篇文章主要介绍了使用vue和datatables进行表格的服务器端分页实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
vue+ElementPlus框架Container 布局容器不能铺满整个屏幕的解决方案
这篇文章主要介绍了vue+ElementPlus框架Container 布局容器不能铺满整个屏幕的解决方案,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
本文是基于vue官方风格指南整理的关于Vue前端开发规范(推荐),非常不错，具有参考借鉴借鉴价值，需要的朋友可以参考下2018-04-04
本篇文章主要介绍了详解使用vue脚手架工具搭建vue-webpack项目，非常具有实用价值，需要的朋友可以参考下2017-05-05
这篇文章主要为大家详细介绍了vue实现滑动解锁功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
前端上传大文件、视频的时候会出现超时、过大、很慢等情况,为了解决这一问题,跟后端配合做了一个切片的功能,本文主要介绍了vue分片上传视频并转换为m3u8文件播放的实现示例,感兴趣的可以了解一下2023-11-11
最新评论