记一次用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 相关文章推荐
js实现的切换面板实例代码
Jun 17 Javascript
js实现省市联动效果的简单实例
Feb 10 Javascript
javascript的动态加载、缓存、更新以及复用(一)
Jun 09 Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 Javascript
理解javascript封装
Feb 23 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
May 03 Javascript
基于JavaScript中字符串的match与replace方法(详解)
Dec 04 Javascript
详解如何用模块化的方式写vuejs
Dec 16 Javascript
node.js处理前端提交的GET请求
Aug 30 Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 Javascript
Nuxt页面级缓存的实现
Mar 09 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
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
PHP运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
基于PHP array数组的教程详解
2013/06/05 PHP
PHP实现递归目录的5种方法
2016/10/27 PHP
jQuery 三击事件实现代码
2013/09/11 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
2013/11/17 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
js CSS3实现卡牌旋转切换效果
2017/07/04 Javascript
javascript流程控制语句集合
2017/09/18 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
JavaScript常用事件介绍
2019/01/21 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
python自动安装pip
2014/04/24 Python
简单理解Python中基于生成器的状态机
2015/04/13 Python
Python实现将绝对URL替换成相对URL的方法
2015/06/28 Python
python实现的希尔排序算法实例
2015/07/01 Python
Python中表达式x += y和x = x+y 的区别详解
2017/06/20 Python
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
python实现简单聊天室功能 可以私聊
2019/07/12 Python
python3.7 的新特性详解
2019/07/25 Python
Python高级特性 切片 迭代解析
2019/08/23 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
pytorch多GPU并行运算的实现
2019/09/27 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
Python日志:自定义输出字段 json格式输出方式
2020/04/27 Python
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
Chicco婴儿用品美国官网:汽车座椅、婴儿推车、高脚椅等
2018/11/05 全球购物
春节联欢晚会主持词
2014/03/24 职场文书
个人承诺书格式
2014/06/03 职场文书
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL