Ant Design Vue: 手写分页

目的

VUE+Ant Design Vue: 手写分页

H5代码块

<a-card hoverable>
  <h3>IPCI获取信息</h3>
  <div style="min-height: 407px;">
    <a-card-meta v-for="(item,key) in newIPCI" :key="key"
      :title="item.title"
      :description="item.description">
      <a-avatar slot="avatar" :src="item.src" />
    </a-card-meta>
  </div>
  <a-row >
    <a-col :span="12">
      <span  v-for="(item,key) in times" :key="key" @click="paging(key)"></span>
    </a-col>
    <a-col :span="12" align="right">
      <a-button size="small">more+</a-button>
    </a-col>
  </a-row>
</a-card>

CSS代码块

.ant-card-bordered{
  /* min-height: 530px; */
  width: 48%;
  float: left;
  margin: 1%
}
.ant-avatar{
    width: 115px;
    height: 65px;
    line-height: 32px;
    border-radius: 0;
}
.ant-card-meta-title{
  margin-bottom: 0px;
}
.ant-card-meta{
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
  margin-top: 13px;
}
.ant-card /deep/ .ant-card-meta-description{
  font-size: 12px;
}
.ant-row{
  margin-top: 15px;
}
.ant-row span{
  border: 10px solid #cccccc;
  height: 5px;
  width: 5px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 2px 2px 7px #cccccc;
  margin-right: 5px;
}
.ant-row span:hover{
  border: 10px solid #999999;
  box-shadow: 2px 2px 7px #999999;
}

JS代码块

paging(num){//切换分页,切换数据
  // console.log(num);
  this.newIPCI=this.IPCI.slice(5*num,5*(num+1));      
}
mounted(){
  this.times=Math.ceil(this.IPCI.length/5);//分页按钮个数
  this.newIPCI=this.IPCI.slice(0,5);//获取初始IPCI列表
}

数据

IPCI:[{
      title:"版权名称",
      description:"版权信息简介这是很长可以换行展示的一段信息版权信息简介这是很长可以换行展示的一段信息。",
      src:"http://img2.imgtn.bdimg.com/it/u=3580499685,2387378571&fm=26&gp=0.jpg"
  },{
      title:"版权名称2",
      description:"版权信息简介这是很长可以换行展示的一段信息版权信息简介这是很长可以换行展示的一段信息。",
      src:"http://img2.imgtn.bdimg.com/it/u=3580499685,2387378571&fm=26&gp=0.jpg"
  },{
      title:"版权名称3",
      description:"版权信息简介这是很长可以换行展示的一段信息版权信息简介这是很长可以换行展示的一段信息。",
      src:"http://img2.imgtn.bdimg.com/it/u=3580499685,2387378571&fm=26&gp=0.jpg"
  },{
      title:"版权名称4",
      description:"版权信息简介这是很长可以换行展示的一段信息版权信息简介这是很长可以换行展示的一段信息。",
      src:"http://img2.imgtn.bdimg.com/it/u=3580499685,2387378571&fm=26&gp=0.jpg"
  },{
      title:"版权名称5",
      description:"版权信息简介这是很长可以换行展示的一段信息版权信息简介这是很长可以换行展示的一段信息。",
      src:"http://img2.imgtn.bdimg.com/it/u=3580499685,2387378571&fm=26&gp=0.jpg"
  },{
      title:"版权名称6",
      description:"版权信息简介这是很长可以换行展示的一段信息版权信息简介这是很长可以换行展示的一段信息。",
      src:"http://img2.imgtn.bdimg.com/it/u=3580499685,2387378571&fm=26&gp=0.jpg"
}],
times:1,
newIPCI:[]

效果展示

切换分页