记一次用vue做的活动页

Leck1e 发布于2019-08-23 16:52 / 1328人阅读

摘要：前言最近，公司的提了一个需求自动获取七天新上传的并且审核通过的商品做成固定的链接的一个活动页面。当时想了一想就用做了，感觉效果还行，在这分享一下我是如何做的希望对大家有一点点帮助。

前言

最近，公司的PM提了一个需求自动获取七天新上传的并且审核通过的商品做成固定的链接的一个活动页面。当时想了一想就用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:关于页面数据还没加载出来的优化

由于从后台获取数据需要一定的时间当数据没加载进来的时候会出现问题（也许就是一秒但这也会给用户带来不好的体验感。）

</>复制代码

当数据没加载的时候我就设置opacity为0，当数据出来的时候就设置opacity：1

3:关于价格的优化

由于设计稿的需求是价格的整数的字体要比小数要大，所以就把整数和小数分别用spilt分隔来了。然后在给整数的字体比小数点的字体大一号就行了。

</>复制代码 
￥{{String(product.price).split(".")[0]}}.{{String(product.price).split(".")[1]||"0"}}/天

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，当数据加载完成是显示扯到底了

</>复制代码 
- 不要扯了 已经扯到底了 -
- loading -

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++;
          }
        }
      },

总结

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

云服务器 GPU云服务器记一次在阿里云搭建服务器记一次阿里云服务器集体中毒阿里云服务器活动多久一次活动专题页

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103415.html

记一次用vue做的活动页

摘要：前言最近，公司的提了一个需求自动获取七天新上传的并且审核通过的商品做成固定的链接的一个活动页面。当时想了一想就用做了，感觉效果还行，在这分享一下我是如何做的希望对大家有一点点帮助。 showImg(https://segmentfault.com/img/bVbq9iO?w=176&h=220); 前言最近，公司的PM提了一个需求自动获取七天新上传的并且审核通过的商品做成固定的链接...

Freeman 2019-08-29 18:34 评论0 收藏0
记一次基于vue的spa多页签实践经验

摘要：然后类似一样我的命名是可以在页面的任何地方使用，如果你对具体的实现方法有兴趣，欢迎点击本文结尾的链接，去我的仓库上查看。前言最近收到一个这样的需求,要求做一个基于 vue 和 element-ui 的通用后台框架页,具体要求如下: 要求通用性高,需要在后期四十多个子项目中使用，所以大部分地方都做成可配置的. 要求做成脚手架的形式.可以 npm 安装要求实现多页签,并且可以通过浏...

ispring 2019-08-26 12:13 评论0 收藏0
记一次基于vue的spa多页签实践经验

摘要：然后类似一样我的命名是可以在页面的任何地方使用，如果你对具体的实现方法有兴趣，欢迎点击本文结尾的链接，去我的仓库上查看。前言最近收到一个这样的需求,要求做一个基于 vue 和 element-ui 的通用后台框架页,具体要求如下: 要求通用性高,需要在后期四十多个子项目中使用，所以大部分地方都做成可配置的. 要求做成脚手架的形式.可以 npm 安装要求实现多页签,并且可以通过浏...

张迁 2019-08-02 11:15 评论0 收藏0
记一次解决谷歌浏览器Google Chrome Helper占用过高cpu问题

摘要：机器过高，一般都是可以从任务管理器着手解决。系统的任务管理器可以监控各个程序占用的是否正常，通常程序自身也是有任务管理的。像谷歌浏览器这种软件，几乎本身就是一个操作系统，所以说它的任务管理器也是必不可少的。阅读原文 1. 问题现象有时候发现mac风扇响的厉害，于是我检查了mac系统的活动监视器，发现Google Chrome Helper占用99%的CPU。通常来说Chrome如...

sihai 2019-08-26 11:59 评论0 收藏0