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

更新时间：2019年04月11日 09:02:57 作者：独醉莫邪

这篇文章主要介绍了记一次用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++;
     }
    }
   },

总结

作为一个即将毕业的大四学生，这是我来公司实习做的活动页，希望可以帮助大家，互相学习，一起进步。当然也有一些不足之处，请大家多多指教。码字不容易，希望大家点个赞。前端路漫漫，与君共勉之。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue中的事件修饰符介绍和示例
在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理,需要的朋友可以参考下
2023-04-04
Vue中data数据初始化方法详解
这篇文章主要介绍了Vue中data数据初始化方法，数据初始化是在组件实例化时发生的，在组件中，可以通过data选项来定义组件的初始数据，需要详细了解可以参考下文
2023-05-05
Vue element树形控件添加虚线详解
这篇文章主要为大家介绍了Vue element树形控件添加虚线，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助<BR>
2021-11-11
前端vue中实现文件下载的几种方法总结
这篇文章主要介绍了前端vue中实现文件下载的几种方法总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
vue 动态路由component 传递变量报错问题解决
这篇文章主要为大家介绍了vue 动态路由component 传递变量报错问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
antv完成区间柱形图一列多柱配置实现详解
这篇文章主要为大家介绍了antv完成区间柱形图一列多柱配置实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
Vue获取input值的四种常用方法
Vue是一种流行的Web开发框架,它提供了一个双向绑定的语法糖。在Vue中,我们可以很容易地获取页面上的数据,并且可以实时的响应其变化,这篇文章主要给大家介绍了关于Vue获取input值的四种常用方法,需要的朋友可以参考下
2023-09-09
vue中记录滚动条位置的两种方法
最近用 Vue 做移动端页面遇到一个问题,需要记住滚动条的位置,所以下面这篇文章主要给大家介绍了关于vue中记录滚动条位置的两种方法,文中给出了详细的实例,需要的朋友可以参考下
2023-01-01
vue+iview如何实现拼音、首字母、汉字模糊搜索
这篇文章主要介绍了vue+iview如何实现拼音、首字母、汉字模糊搜索，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue-router中query和params的区别解析
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用，这篇文章主要介绍了vue-router中query和params的区别 ,需要的朋友可以参考下
2022-10-10