(2)处理返回的数据
el: “#searchApp”,
data: {
search:{},
goodsList:[],
total: 0,
totalPage: 0,
selectedSku:{}
},
created(){//这是个构造方法
//获取请求参数
const search = ly.parse( location.search.substring(1));
this.search = search;
//发送后台数据
this.loadData();
},
methods:{
loadData(){
//发送数据到后台
ly.http.post(“/search/page”,this.search).then(resp => {
//保存分页结果
this.total = resp.data.total;
this.totalPage = resp.data.totalPage;
//保存当前页商品数据
resp.data.items.forEach(goods =>{
// 把JSON处理为JS对象
goods.skus = JSON.parse(goods.skus);//JSON.parse将JSON字符串转换为JSON对象
//初始化被选中的sku
goods.selectedSku = goods.skus[0];
})
this.goodsList = resp.data.items;
}).catch(error =>{
})
}
},
(3)完善HTML代码
-
-
¥
促{ { goods.subTitle }}
已有2000人评价
刷新页面
显示成功
(4)处理上述的代码
1)设置价格
定义ly变量
设置价格格式
刷新页面
2)处理字太多下不下
促{ { goods.subTitle.substring(0,15) }}…
刷新页面
3)设置点击小图片切换大图片
-
刷新页面
设置鼠标动到图片上切换选择并显示对应的图片
鼠标悬浮直接切换当前的sku,之后图片价格和描述都会改变
@mouseenter=“goods.selectedSku=sku”
切换成功
2、设置分页条
-
设置初始页
search.page = parseInt(search.page) || 1;
刷新页面。我们可以看到设置了page的初始值为1
设置是否选中当前页
刷新页面
3、设置分页的当前页永远在中间
当当页大于3的时候整体页数+1
v-for=“i in Math.min(5,totalPage)” :key=“i”>
实现index函数
index(i){
if(this.search.page <= 3 || this.totalPage < 5){
return i;
}else if(this.search.page >= this.totalPage - 2){
return this.totalPage - 5 + i;
}else {
return i + this.search.page - 3;
}
}