功能效果如下
前端实现换一批功能,到了最后一页,又回到第一页
因为后端没有加分页功能,只能前端实现分页功能。
<div class="wupopup" if="{{wupopupflag}}">
<div id="animation">
<div class="bg3-box">
<div class="adtitle">
<text>大家都在看的热门小说</text>
</div>
<div
class="books-box"
for="{{newbookList}}"
@click="goToDetail1($item.id)"
>
<div class="list-cover">
<image src="{{$item.verticpic}}"></image>
</div>
<div class="list-text">
<text class="headline">{{ $item.title }}</text>
<div class="books-desc">
<text >{{ $item.desc }}</text>
</div>
<div class="list-text-bottom">
<div class="bottom-left">
<text>{{ $item.tags[0] }}</text>
<text class="shu">|</text>
<text>{{ $item.tags[1] }}</text>
</div>
<div class="bottom-right">
<text>去阅读</text>
</div>
</div>
</div>
</div>
<div class="hyp" @click="renderBook" if="{{advertisingBook.length>3}}">
<text>换一批</text>
<image src="../../assets/icon/hyp.png"></image>
</div>
</div>
<div onclick="goToHome" class="close">
<image src="/assets/images/advclose.png"></image>
</div>
</div>
</div>
template
分页js逻辑
renderBook() {
var pagesize=3
var len = this.advertisingBook.length;
var group = len / pagesize;
if (len % pagesize != 0) {
group = parseInt(group) + 1;
}
// 一共有group页,当前页数num小于group 就+1页
if(group > this.num){
this.timeStart= this.timeStart + pagesize
this.timeEnd= this.timeEnd + pagesize
this.num++
}else{
//重新回到首页
this.num=1
this.timeStart= 0
this.timeEnd= pagesize
}
// slice方法截取内容
this.newbookList = this.advertisingBook.slice(
this.timeStart,
this.timeEnd
);
},
js
.wupopup{
position: fixed;
left: 0px;
top: 0;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.21);
}
#animation {
position: relative;
background-color: #fff;
border-radius: 20px;
width: 620px;
.bg3-box {
background-color: #fff;
flex-direction: column;
padding:0px 20px 40px;
width: 100%;
border-radius: 20px;
.adtitle{
justify-content: center;
margin-top: 50px;
text{
font-size: 36px;
font-weight: bold;
color: #333333;
line-height: 42px;
}
}
.hyp{
width: 100%;
justify-content: center;
padding: 20px;
margin-top: 50px;
align-items: center;
image{
width:40px;
margin-left: 10px;
}
}
}
.books-box {
margin-top: 41px;
width: 100%;
.list-cover {
width: 150px;
height: 200px;
image {
width: 100%;
height: 100%;
border-radius: 4px;
}
}
.list-text {
width: 300px;
position: relative;
flex-direction: column;
flex: 1;
margin-left: 27px;
height: 200px;
.headline{
font-weight: 600;
color: #333333;
line-height: 52px;
font-size: 32px;
lines: 1;
}
.books-desc{
height: 80px;
text{
/* background-color: #00ffff; */
font-size: 24px;
font-weight: 500;
color: #999999;
line-height: 36px;
}
}
.list-text-bottom{
align-items: center;
justify-content: space-between;
margin-top: 20px;
.bottom-left{
text{
font-size: 22px;
color: #999999;
line-height: 36px;
}
.shu{
margin: 0 10px;
}
}
.bottom-right{
width: 122px;
height: 58px;
background-color: #52D2BA;
border-radius: 8px;
justify-content: center;
margin-right: 10px;
text{
color: #fff;
font-size: 22px;
}
}
}
}
}
.close {
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
justify-content: center;
align-items: center;
/* background-color: #00ffff; */
image{
width: 22px;
height: 22px;
}
}
}
css
更多推荐
vue 前端实现换一换或下一页功能分页
发布评论