前言
最近，公司的PR提了一個需求 自動獲取七天新上傳的并且審核通過的商品做成固定的鏈接的一個活動頁面。當時想了一想就用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++; } } },總結
作為一個即將畢業的大四學生，這是我來公司實習做的活動頁，希望可以幫助大家，互相學習，一起進步。當然也有一些不足之處，請大家多多指教。碼字不容易，希望大家點個贊。前端路漫漫，與君共勉之。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
