記一次用vue做的活動(dòng)頁(yè)

Leck1e 發(fā)布于2019-08-23 16:52 / 1265人閱讀

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

前言

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

效果圖

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

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

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

由于后段傳過(guò)來(lái)的圖片大小不一樣，我就對(duì)圖片做了做了一下優(yōu)化。整個(gè)圖片在填充盒子的同時(shí)保留其長(zhǎng)寬比
代碼：

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

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

.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)于頁(yè)面數(shù)據(jù)還沒(méi)加載出來(lái)的優(yōu)化

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

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

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

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

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

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

從后臺(tái)獲取數(shù)據(jù)是很重要的一部分由于后段給了二個(gè)參數(shù) 一個(gè)是當(dāng)前頁(yè) 一個(gè)是一個(gè)頁(yè)面有多少條數(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:分頁(yè)

所謂的活動(dòng)頁(yè)肯定要做分頁(yè)處理

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：懶加載

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

      lazyLoad: function() {
        var seeHeight = document.documentElement.clientHeight; // 可見(jiàn)區(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é)

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

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

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Leck1e

男|高級(jí)講師

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

TA的文章

word2vec

閱讀 1550·2023-04-26 02:08
身價(jià)過(guò)億的女王對(duì)小碼農(nóng)說(shuō)中斷會(huì)了嗎

閱讀 3139·2021-10-14 09:42
域名中的主機(jī)名是什么-網(wǎng)址的主機(jī)名是什么？

閱讀 7230·2021-09-22 15:34
CSS-在`有限寬度的`父級(jí)內(nèi)部時(shí)，創(chuàng)建一個(gè)`全瀏覽器寬度`的容器

閱讀 3250·2019-08-30 13:16
(00)00-7F字符編碼對(duì)照表

閱讀 2752·2019-08-26 13:49
這兒有一個(gè)使你網(wǎng)頁(yè)性能提升10倍的工具

閱讀 1356·2019-08-26 11:59
用JavaScript來(lái)計(jì)算兩個(gè)圖像的相似度

閱讀 1287·2019-08-26 10:31
一文讀懂JSONP原理

閱讀 2178·2019-08-23 17:19

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

資訊專欄INFORMATION COLUMN

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

記一次用vue做的活動(dòng)頁(yè)

相關(guān)文章