©2020-2024 ioDraw All rights reserved,
Privacy Policy
效果如下：
精华原理总结：
后台实现分页获取，前端实现点击切换页面按钮，重新请求分页数据进行展示
<div class="show_car "> <!--
对需要展示的列表数据carList进行循环，实现多个数据信息展示，@click绑定点击事件，点击数据信息内容，触发两个函数 getCarDetailImg以及
Myopen函数，触发多个函数，使用";"分隔--> <div class="car horizon" v-for="item in carLists"
@click="getCarDetailImg(item.id,item.name);Myopen('carBuyDetail')"> <!-- img
动态绑定显示图片--> <img style="margin-right:22px" v-bind:src="item.photo"></img> <!-- {
{item.name}} 显示请求到的数据信息 --> <p class="name">{{item.name}}</p> <div> <p
class="info" >{{item.subName}}</p> </div> <div> <p class="horizon
fixed">一口价</p> <p class="horizon price" >{{item.price}}</p> <p class="horizon
price">元</p> <p class="horizon condition" >{{item.carConText}}</p> </div>
</div> <!-- 分页的点击事件 使用@click绑定点击事件，点击触发getCarList函数，请求新的数据--> <div
class="page_area"> <!--使用变量page记录当前页面--> <p class="horizon"
@click="getCarList(page-1)">上一页</p> <p class="horizon">第{{page}}页</p> <p
class="horizon" @click="getCarList(page+1)"> 下一页</p> </div> </div>
附css代码
.car_buy { width:1800px; height:588px; background:rgba(247,247,247,1);
position:relative; margin:0 auto; } .car_buy .title{ position:absolute;
margin-top:82px; margin-left:347px; font-size:30px; font-family:FontName;
color:rgba(51,51,51,1); line-height:35px; } .car_buy .show_car{
position:absolute; margin-left:347px; margin-top:153px; } .car_buy .car{
height:320px; width:260px; padding-right:22px; } .car_buy .car .name{
width:222px; height:20px; font-size:17px;
font-family:PingFangSC-Regular,PingFang SC; font-weight:400;
color:rgba(51,51,51,1); line-height:20px; } .car_buy .car .info{
font-size:14px; font-family:PingFangSC-Regular,PingFang SC; font-weight:400;
color:rgba(153,153,153,1); line-height:16px; } .car_buy .car .box{ text-align:
-moz-center !important; text-align: center; vertical-align: middle; } .car_buy
.car .fixed{ vertical-align: middle; font-size:12px;
font-family:PingFangSC-Regular,PingFang SC; font-weight:400;
color:rgba(255,70,6,1); line-height:18px; } .car_buy .car .price{
padding-left:2px; vertical-align: middle; font-size:18px;
font-family:PingFangSC-Medium,PingFang SC; font-weight:500;
color:rgba(255,70,6,1); line-height:8px; } .car_buy .car .condition{
position:absolute; margin-left:226px; vertical-align: middle; text-align:
center; width:25px; height:18px; border:2px solid rgba(255,70,6,1);
border-radius:2px; font-size:10px; font-family:PingFangSC-Regular,PingFang SC;
font-weight:400; color:rgba(255,70,6,1); line-height:18px; } .car_buy .car img{
height:195px; width:260px; } .car_buy .page_area p{ padding:20px; } .car_buy
.page_area{ margin-left:380px; margin-top:340px; }
javascript
date中声明使用到的变量信息
data:{ 'carLists':[],//carLists 初始化为数组型数据 'page':1 //page初值为1 }
页面初始化时需要有数据信息，第一次getCarList请求可放在vue生命周期函数created中
created:function(){ this.getCarList(this.page); }
获取数据函数getCarList，放在methods中
getCarList(page){ if(page == 0){ //page等于0，表示已是第一页，提示用户已到第一页 alert("已到第一页！")
return; } var self = this; axios.get('请求参数',{ params: { page: page,
//后台支持必要参数，page请求页 pageSize: 4//后台支持必要参数,pageSize 请求数据量 }, headers:{ //其他头部参数
token:self.vistorToken } }) .then(function (response) {//请求成功
console.log(response); if(response.data.data.length ==
0){//请求数据长度为0，表示没有数据，提示用户到最后一页 alert("已到最后一页！") return; } self.page =
page;//无其他情况，表示请求成功，更新记录页面的page参数 self.carLists = response.data.data;
//更新carLists信息 } }) }