©2020-2024 ioDraw All rights reserved
The effect is as follows ：
Summary of essence principle ：
Paging acquisition in the background , Click the switch page button in the front end , Re request paging data for display
<div class="show_car "> <!--
List data to be displayed carList Cycle , Realize multiple data information display ,@click Bind click event , Click data information content , Trigger two functions getCarDetailImg as well as
Myopen function , Trigger multiple functions , use ";" separate --> <div class="car horizon" v-for="item in carLists"
@click="getCarDetailImg(item.id,item.name);Myopen('carBuyDetail')"> <!-- img
Dynamic binding display picture --> <img style="margin-right:22px" v-bind:src="item.photo"></img> <!-- {
{item.name}} Display the requested data information --> <p class="name">{{item.name}}</p> <div> <p
class="info" >{{item.subName}}</p> </div> <div> <p class="horizon
fixed"> Price </p> <p class="horizon price" >{{item.price}}</p> <p class="horizon
price"> element </p> <p class="horizon condition" >{{item.carConText}}</p> </div>
</div> <!-- Paged click events use @click Bind click event , Click trigger getCarList function , Request new data --> <div
class="page_area"> <!-- Use variables page Record current page --> <p class="horizon"
@click="getCarList(page-1)"> previous page </p> <p class="horizon"> The first {{page}} page </p> <p
class="horizon" @click="getCarList(page+1)"> next page </p> </div> </div>
attach css code
.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 Variable information used in declaration
data:{ 'carLists':[],//carLists Initialize to array data 'page':1 //page The initial value is 1 }
Data information is required during page initialization , for the first time getCarList Requests can be placed in vue Life cycle function created in
created:function(){ this.getCarList(this.page); }
Get data function getCarList, Put on methods in
getCarList(page){ if(page == 0){ //page be equal to 0, Indicates that it is the first page , Prompt the user to the first page alert(" To page 1 !")
return; } var self = this; axios.get(' Request parameters ',{ params: { page: page,
// Background support required parameters ,page Request page pageSize: 4// Background support required parameters ,pageSize Requested data volume }, headers:{ // Other head parameters
token:self.vistorToken } }) .then(function (response) {// Request succeeded
console.log(response); if(response.data.data.length ==
0){// The requested data length is 0, Indicates that there is no data , Prompt the user to the last page alert(" To the last page !") return; } self.page =
page;// No other circumstances , Indicates that the request was successful , To update a record page page parameter self.carLists = response.data.data;
// to update carLists information } }) }
Technology