记一次用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
javascript 写的一个简单的timer
Jul 30 Javascript
Javascript 键盘keyCode键码值表
Dec 24 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
JS Replace 全部替换字符的用法小结
Dec 24 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
简化版手机端照片预览组件
Apr 13 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
Aug 30 Javascript
利用JS响应式修改vue实现页面的input值
Sep 02 Javascript
node实现mock-plugin中间件的方法
Dec 25 Javascript
解决vue2中使用elementUi打包报错的问题
Sep 22 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将时间差转换为字符串提示
2011/09/07 PHP
apache php模块整合操作指南
2012/11/16 PHP
PHP简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
PHP中register_shutdown_function函数的基础介绍与用法详解
2017/11/28 PHP
JavaScript 调试器简介
2009/02/21 Javascript
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
nodejs简单实现中英文翻译
2015/05/04 NodeJs
jquery ui dialog替代confirm实例分析
2016/01/25 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
Python中的__slots__示例详解
2017/07/06 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
Python3基于sax解析xml操作示例
2018/05/22 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
Pycharm如何打断点的方法步骤
2019/06/13 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
python如何判断IP地址合法性
2020/04/05 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
Python命名空间及作用域原理实例解析
2020/08/12 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
南京某公司笔试题
2013/01/27 面试题
电子商务专业自我鉴定
2013/12/18 职场文书
写自荐信要注意什么
2013/12/26 职场文书
元宵节晚会主持人串词
2014/03/25 职场文书
优质服务口号
2014/06/11 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
音乐研修感悟
2015/11/18 职场文书