記一次用vue做的活動頁

Freeman 發(fā)布于2019-08-29 18:34 / 3585人閱讀

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

前言

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

效果圖

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

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

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ù)沒加載進來的時候會出現(xiàn)問題（也許就是一秒但這也會給用戶帶來不好的體驗感。）

當(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ù)點的字體大一號就行了。

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

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ù)加載完成是顯示扯到底了

- 不要扯了 已經(jīng)扯到底了 -
- loading -

5：懶加載

由于這個活動頁圖片有點多所以用了懶加載

      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é)生，這是我來公司實習(xí)做的活動頁，希望可以幫助大家，互相學(xué)習(xí)，一起進步。當(dāng)然也有一些不足之處，請大家多多指教。碼字不容易，希望大家點個贊。前端路漫漫，與君共勉之。

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114420.html

發(fā)表評論

登陸后可評論

0條評論

Freeman

男|高級講師

我要關(guān)注我要私信

TA的文章

seq2seq

閱讀 3416·2023-04-26 02:41
pypi

閱讀 2476·2023-04-26 00:14
NameSilo域名優(yōu)惠碼集合匯總（無套路且可支付寶付款）

閱讀 2908·2021-08-11 10:22
百萬創(chuàng)作人的視頻創(chuàng)意靈感，也離不開“云”

閱讀 1298·2019-12-27 11:38
記一次用vue做的活動頁

閱讀 3586·2019-08-29 18:34
前端實例練習(xí) - 圖片覆蓋層

閱讀 2392·2019-08-29 12:13
使用babel7構(gòu)建完美的純ts開發(fā)環(huán)境

閱讀 2967·2019-08-26 18:26
UCloud云主機自定義鏡像

閱讀 1881·2019-08-26 16:49

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

記一次用vue做的活動頁

相關(guān)文章