在請求資料回來時，將字串序列化成物件，頁面渲染思路
阿新 • • 發佈：2018-12-29
var vm = new Vue({ el: "#searchApp", data: { ly, search:{}, goodsList :[], total :0, totalPage :0 }, created(){ if(!location.search){ return; } const search = ly.parse(location.search.substring(1)); this.search = search; this.loadData(); }, methods:{ loadData(){ // 發起非同步請求 ly.http.post("/search/page",this.search) .then(resp => { console.log(resp.data); this.total = resp.data.total; this.totalPage = resp.data.totalPage; //將skus轉成json物件 resp.data.items.forEach(goods=>{ goods.skus = JSON.parse(goods.skus); goods.selectedSku = goods.skus[0]; }) this.goodsList = resp.data.items; }) }
http://www.jd.com/search.html?key=%E6%89%8B%E6%9C%BA
獲取查詢引數序列化Json
if(!location.search){return; }
console.log("222");
const search = ly.parse(location.search.substring(1));
his.search = search;
給每一個goods物件都填將一個selectedSku屬性，預設儲存第一個sku
<div class="goods-list"> <ul class="yui3-g"> <li class="yui3-u-1-5" v-for="goods in goodsList" :key="goods.id"> <div class="list-wrap"> <div class="p-img"> <a href="item.html" target="_blank"><img :src="goods.selectedSku.image" height="200"/></a> <ul class="skus" > <li :class="{selected : goods.selectedSku.id==sku.id }" @mouseenter="goods.selectedSku=sku" v-for="sku in goods.skus " :key="sku.id"><img :src="sku.image"></li> </ul> </div> <div class="clearfix"></div> <div class="price"> <strong> <em>¥</em> <i v-text = "ly.formatPrice(goods.selectedSku.price)"></i> </strong> </div> <div class="attr"> <em v-text="goods.selectedSku.title.substring(0,21)+'...'"></em> </div> <div class="cu"> <em><span>促</span>{{goods.subTitle.substring(0,15)+'...'}}</em> </div> <div class="commit"> <i class="command">已有2000人評價</i> </div> <div class="operate"> <a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入購物車</a> <a href="javascript:void(0);" class="sui-btn btn-bordered">對比</a> <a href="javascript:void(0);" class="sui-btn btn-bordered">關注</a> </div> </div> </li>
分頁條實現
<div class="sui-pagination pagination-large"> <ul style="width: 550px"> <li :class="{prev:true,disabled:search.page === 1}"> <a href="#">«上一頁</a> </li> <li :class="{active: index(i) === search.page}" v-for="i in Math.min(5,totalPage)" :key="i"> <a href="#">{{index(i)}}</a> </li> <li class="dotted" v-show="totalPage > 5"><span>...</span></li> <li :class="{next:true,disabled:search.page === totalPage}"> <a href="#">下一頁»</a> </li> </ul> <div> <span>共{{totalPage}}頁 </span> <span> 到第 <input type="text" class="page-num" :value="search.page"> 頁 <button class="page-confirm" onclick="alert(1)">確定</button> </span> </div> </div>
js 思路
思路分析：
- 最多有5個按鈕，因此我們可以用
v-for迴圈從1到5即可，假如遍歷得到的值為i - 但是分頁條不一定是從1開始：
- 如果當前頁值小於等於3的時候，分頁條位置從1開始到5結束，頁碼就是遍歷得到的
i的值 - 但是如果大於3，則不應該是
i，而是要比i大了（page-3），所以就是page-3 + i
- 如果當前頁值小於等於3的時候，分頁條位置從1開始到5結束，頁碼就是遍歷得到的
index(i) {
if (this.search.page <= 3 || this.totalPage <= 5) {
// 當前頁小於3，則頁碼就是從 i 開始
return i;
} else if(this.search.page <= this.totalPage - 2) {
// 大於3，則從page-2開始，然後逐個加1
return this.search.page - 3 + i;
} else{
return this.totalPage - 5 + i;
}
}
<div class="fr">
<div class="sui-pagination pagination-large">
<ul style="width: 550px">
<li :class="{prev:true,disabled:search.page === 1}">
<a href="#" @click="prevPage">«上一頁</a>
</li>
<li :class="{active: index(i) === search.page}" v-for="i in Math.min(5,totalPage)" :key="i">
<a href="#">{{index(i)}}</a>
</li>
<li class="dotted" v-show="totalPage > 5"><span>...</span></li>
<li :class="{next:true,disabled:search.page === totalPage}">
<a href="#" @click="nextPage">下一頁»</a>
</li>
</ul>
<div>
<span>共{{totalPage}}頁 </span>
<span>
到第
<input type="text" class="page-num" :value="search.page">
頁 <button class="page-confirm" onclick="alert(1)">確定</button>
</span>
</div>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#searchApp",
data: {
ly,
search:{},
goodsList :[],
total :0,
totalPage :0
},
created(){
console.log("111");
if(!location.search){
return;
}
const search = ly.parse(location.search.substring(1));
search.page =search.page ? parseInt(search.page) :1;
this.search = search;
this.loadData();
},
methods:{
loadData(){
console.log("333");
// 發起非同步請求
ly.http.post("/search/page",this.search)
.then(resp => {
console.log(resp.data);
this.total = resp.data.total;
this.totalPage = resp.data.totalPage;
//將skus轉成json物件
resp.data.items.forEach(goods=>{
goods.skus = JSON.parse(goods.skus);
goods.selectedSku = goods.skus[0];
})
this.goodsList = resp.data.items;
})
},
index(i) {
if (this.search.page <= 3 || this.totalPage <= 5) {
// 當前頁小於3，則頁碼就是從 i 開始
return i;
} else if(this.search.page <= this.totalPage - 2) {
// 大於3，則從page-2開始，然後逐個加1
return this.search.page - 3 + i;
} else{
return this.totalPage - 5 + i;
}
},
prevPage(){
if(this.search.page > 1){
this.search.page--
}
},
nextPage(){
if(this.search.page < this.totalPage){
this.search.page++
}
}
},
watch:{
search:{
deep:true,
handler(val,old){
if(!old || !old.key){
// 如果舊的search值為空，或者search中的key為空，證明是第一次
return;
}
// 把search物件變成請求引數，拼接在url路徑
window.location.href = "http://www.leyou.com/search.html?" + ly.stringify(val);
}
}
},
components:{
lyTop: () => import("./js/pages/top.js")
}
});
</script>