記一次用vue作的活動頁

前言

最近，公司的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:關於頁面數據還沒加載出來的優化

因爲從後臺獲取數據須要必定的時間 當數據沒加載進來的時候會出現問題（也許就是一秒但這也會給用戶帶來很差的體驗感。）

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

總結

做爲一個即將畢業的大四學生，這是我來公司實習作的活動頁，但願能夠幫助你們，互相學習，一塊兒進步。固然也有一些不足之處，請你們多多指教。碼字不容易，但願你們點個贊。前端路漫漫，與君共勉之。