溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
前言
最近，公司的PR提了一個(gè)需求 自動(dòng)獲取七天新上傳的并且審核通過(guò)的商品做成固定的鏈接的一個(gè)活動(dòng)頁(yè)面。當(dāng)時(shí)想了一想就用vue做了，感覺(jué)效果還行，在這分享一下我是如何做的 希望對(duì)大家有一點(diǎn)點(diǎn)幫助。
效果圖
附上線上地址
在線預(yù)覽：新品租賃頁(yè)
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)感。）
<div class="container" :class="productList.length ? 'show': ''">
當(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)就行了。
<div class="product-price">￥<span class="em">{{String(product.price).split('.')[0]}}</span>.{{String(product.price).split('.')[1]||'0'}}/天</div>
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ù)加載完成是顯示扯到底了
<div class="footer" v-if="isMaxPage">- 不要扯了 已經(jīng)扯到底了 -</div> <div class="footer" v-if="!isMaxPage">- loading -</div>
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è)贊。前端路漫漫，與君共勉之。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼