快捷導(dǎo)航

記一次用vue做的活動頁的方法步驟

更新時間：2019年04月11日 09:02:57 作者：獨(dú)醉莫邪

這篇文章主要介紹了記一次用vue做的活動頁的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

最近，公司的PR提了一個需求自動獲取七天新上傳的并且審核通過的商品做成固定的鏈接的一個活動頁面。當(dāng)時想了一想就用vue做了，感覺效果還行，在這分享一下我是如何做的希望對大家有一點(diǎn)點(diǎn)幫助。

效果圖

附上線上地址

在線預(yù)覽：新品租賃頁

1：頁面的構(gòu)建及優(yōu)化

所謂的活動頁首先第一步肯定是把頁面切出來，這里就是2*n頁面我這里用的就是grid布局（也可以用flex）我主要講三個點(diǎn)：

1:關(guān)于圖片的優(yōu)化

由于后段傳過來的圖片大小不一樣，我就對圖片做了做了一下優(yōu)化。整個圖片在填充盒子的同時保留其長寬比

代碼：

 .product-img img {
 object-fit: contain;
 width: auto;
 height: auto;
 max-width: 100%;
 max-height: 100%;
 margin: 0 auto;
}

為了不讓圖片覺得突兀我們可以給圖片的盒子設(shè)置一個偽元素

.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:關(guān)于頁面數(shù)據(jù)還沒加載出來的優(yōu)化

由于從后臺獲取數(shù)據(jù)需要一定的時間當(dāng)數(shù)據(jù)沒加載進(jìn)來的時候會出現(xiàn)問題（也許就是一秒但這也會給用戶帶來不好的體驗(yàn)感。）

<div class="container" :class="productList.length ? 'show': ''">

當(dāng)數(shù)據(jù)沒加載的時候我就設(shè)置opacity為0，當(dāng)數(shù)據(jù)出來的時候就設(shè)置opacity：1

3:關(guān)于價格的優(yōu)化

由于設(shè)計稿的需求是價格的整數(shù)的字體要比小數(shù)要大，所以就把整數(shù)和小數(shù)分別用spilt分隔來了。然后在給整數(shù)的字體比小數(shù)點(diǎn)的字體大一號就行了。

<div class="product-price">￥<span class="em">{{String(product.price).split('.')[0]}}</span>.{{String(product.price).split('.')[1]||'0'}}/天</div>

2：獲取數(shù)據(jù)

從后臺獲取數(shù)據(jù)是很重要的一部分由于后段給了二個參數(shù) 一個是當(dāng)前頁一個是一個頁面有多少條數(shù)據(jù)。

  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:下拉刷新的優(yōu)化

當(dāng)數(shù)據(jù)還在加載中顯示loading，當(dāng)數(shù)據(jù)加載完成是顯示扯到底了

<div class="footer" v-if="isMaxPage">- 不要扯了 已經(jīng)扯到底了 -</div>
<div class="footer" v-if="!isMaxPage">- loading -</div>

5：懶加載

由于這個活動頁圖片有點(diǎn)多所以用了懶加載

  lazyLoad: function() {
    var seeHeight = document.documentElement.clientHeight; // 可見區(qū)域高度
    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++;
     }
    }
   },

總結(jié)

作為一個即將畢業(yè)的大四學(xué)生，這是我來公司實(shí)習(xí)做的活動頁，希望可以幫助大家，互相學(xué)習(xí)，一起進(jìn)步。當(dāng)然也有一些不足之處，請大家多多指教。碼字不容易，希望大家點(diǎn)個贊。前端路漫漫，與君共勉之。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: