記一次用vue做的活動頁

Freeman 發布于2019-08-29 18:34 / 3570人閱讀

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

前言

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

由于從后臺獲取數據需要一定的時間當數據沒加載進來的時候會出現問題（也許就是一秒但這也會給用戶帶來不好的體驗感。）

當數據沒加載的時候我就設置opacity為0，當數據出來的時候就設置opacity：1

3:關于價格的優化

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

￥{{String(product.price).split(".")[0]}}.{{String(product.price).split(".")[1]||"0"}}/天

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，當數據加載完成是顯示扯到底了

- 不要扯了 已經扯到底了 -
- loading -

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

總結

作為一個即將畢業的大四學生，這是我來公司實習做的活動頁，希望可以幫助大家，互相學習，一起進步。當然也有一些不足之處，請大家多多指教。碼字不容易，希望大家點個贊。前端路漫漫，與君共勉之。

GPU云服務器云服務器記一次在阿里云搭建服務器記一次阿里云服務器集體中毒阿里云服務器活動多久一次活動專題頁

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114420.html

記一次用vue做的活動頁

摘要：前言最近，公司的提了一個需求自動獲取七天新上傳的并且審核通過的商品做成固定的鏈接的一個活動頁面。當時想了一想就用做了，感覺效果還行，在這分享一下我是如何做的希望對大家有一點點幫助。 showImg(https://segmentfault.com/img/bVbq9iO?w=176&h=220); 前言最近，公司的PM提了一個需求自動獲取七天新上傳的并且審核通過的商品做成固定的鏈接...

Leck1e 2019-08-23 16:52 評論0 收藏0
記一次基于vue的spa多頁簽實踐經驗

摘要：然后類似一樣我的命名是可以在頁面的任何地方使用，如果你對具體的實現方法有興趣，歡迎點擊本文結尾的鏈接，去我的倉庫上查看。前言最近收到一個這樣的需求,要求做一個基于 vue 和 element-ui 的通用后臺框架頁,具體要求如下: 要求通用性高,需要在后期四十多個子項目中使用，所以大部分地方都做成可配置的. 要求做成腳手架的形式.可以 npm 安裝要求實現多頁簽,并且可以通過瀏...

ispring 2019-08-26 12:13 評論0 收藏0
記一次基于vue的spa多頁簽實踐經驗

摘要：然后類似一樣我的命名是可以在頁面的任何地方使用，如果你對具體的實現方法有興趣，歡迎點擊本文結尾的鏈接，去我的倉庫上查看。前言最近收到一個這樣的需求,要求做一個基于 vue 和 element-ui 的通用后臺框架頁,具體要求如下: 要求通用性高,需要在后期四十多個子項目中使用，所以大部分地方都做成可配置的. 要求做成腳手架的形式.可以 npm 安裝要求實現多頁簽,并且可以通過瀏...

張遷 2019-08-02 11:15 評論0 收藏0
記一次解決谷歌瀏覽器Google Chrome Helper占用過高cpu問題

摘要：機器過高，一般都是可以從任務管理器著手解決。系統的任務管理器可以監控各個程序占用的是否正常，通常程序自身也是有任務管理的。像谷歌瀏覽器這種軟件，幾乎本身就是一個操作系統，所以說它的任務管理器也是必不可少的。閱讀原文 1. 問題現象有時候發現mac風扇響的厲害，于是我檢查了mac系統的活動監視器，發現Google Chrome Helper占用99%的CPU。通常來說Chrome如...

sihai 2019-08-26 11:59 評論0 收藏0