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


Posted in Javascript onApril 11, 2019

前言

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

效果图

记一次用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++;
     }
    }
   },

总结

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
图片按比例缩放函数
Jun 26 Javascript
ie8模式下click无反应点击option无反应的解决方法
Oct 11 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 Javascript
浅谈angular2路由预加载策略
Oct 04 Javascript
JavaScript实现简单轮播图效果
Dec 01 Javascript
微信小程序日历组件使用方法详解
Dec 29 Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 Javascript
JS实现横向跑马灯效果代码
Apr 20 Javascript
vue项目实现分页效果
Mar 24 Vue.js
关于JavaScript轮播图的实现
Nov 20 Javascript
vue数据初始化initState的实例详解
Apr 11 #Javascript
Vue起步(无cli)的啊教程详解
Apr 11 #Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 #Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
Apr 10 #Javascript
微信小程序 wepy框架与iview-weapp的用法详解
Apr 10 #Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 #jQuery
详解Vue源码学习之双向绑定
Apr 10 #Javascript
You might like
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
php上传文件常见问题总结
2015/02/03 PHP
提高Laravel应用性能方法详解
2019/06/24 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
JavaScript While 循环基础教程
2007/04/05 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
2012/08/14 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
Vue-cli创建项目从单页面到多页面的方法
2017/09/20 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
jquery+css实现Tab栏切换的代码实例
2019/05/14 jQuery
Python爬取读者并制作成PDF
2015/03/10 Python
Python实现将xml导入至excel
2015/11/20 Python
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
Python 多维List创建的问题小结
2019/01/18 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
Pottery Barn阿联酋:购买家具、家居装饰及更多
2019/12/08 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
司机岗位职责
2013/11/15 职场文书
五一服装活动方案
2014/01/11 职场文书
工作疏忽检讨书
2014/01/25 职场文书
摄影助理岗位职责
2014/02/07 职场文书
酒店采购员岗位职责
2014/03/14 职场文书
机器人瓦力观后感
2015/06/12 职场文书
SQL Server表分区删除详情
2021/10/16 SQL Server
【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
2022/04/01 DOTA