uniapp中scroll-view分页

<template>

<!-- recommend.length>0防止出现undefined -->

<!-- scrolltolower滚动条触底事件 -->

<scroll-view @scrolltolower='isToLower' scroll-y v-if="recommend.length>0">

<view>

<view 

class = "recommend_item"

v-for="item in recommend"

:key="item.aid"

>

<!-- widthFix图片自适应 -->

<image mode="widthFix" :src="baseUrl+item.litpic" ></image>

</view>

</view>


<view>

<view>

<view>

<view>

<text>{{monthes.DD}}/</text>

{{monthes.MM}}月

</view>

<view>{{monthes.title}}</view>

</view>

<view>更多></view>

</view>

<view>

<view

v-for="item in monthes.items"

:key="item.aid"

>

<image :src="baseUrl+item.litpic" mode="aspectFill"></image>

</view>

</view>

</view>


<view>

<view>

<text>热门</text>

</view>

<view>

<view

v-for="item in hots"

:key="item.aid"

>

<image :src="baseUrl+item.litpic" mode="widthFix"></image>

</view>

</view>

</view>


</scroll-view>

</template>


<script>

import moment from "moment";

export default{

data(){

return{

recommend:[],

baseUrl:this.baseUrl,

monthes:[],

hots:[],

params:{

limit:10,

page:1

},

hasMoreData:true

},

mounted(){

this.getList();

},

methods:{

//滚动条触底事件

isToLower(){

//数


if(this.hasMoreData){

this.params.page = this.params.page+1;

console.log(this.params.page);

this.getList();

}else{

uni.showToast({

title:"没有数据了",

icon:"none"

})

}

console.log(this.hasMoreData);

console.log("滚动条触底");

},

getList(){

//console.log(moment(new Date()).format("YYYY"));

this.request({

url:"http://bj.sgmwppi.cn/xcx/blog/recommend",

data:this.params

}).then(res=>{

//console.log(res);

if(res.mycode==1){

console.log(res.hots.length);

if(res.hots.length==0){

this.hasMoreData=false;

}

if(this.recommend.length==0){

//首次加载需要赋值,其他不需要,这样可以提升性能

this.recommend=res.list;

this.monthes=res.list[0];

console.log(this.monthes.add_time);

this.monthes.MM=moment(this.monthes.add_time).format('MM');

this.monthes.DD=moment(this.monthes.add_time).format('DD');

this.monthes.title=res.list[0].title;

this.monthes.items = res.months;

}


//合并数组

this.hots=[...this.hots,...res.hots];

//

//console.log(this.monthes);

}

})

}

}

}

</script>


<style>

.recommend_view_div{

//屏蔽的高度100vh-标题的高度36px

height: calc(100vh - 36px);

}

.recommend_wrap{

display: flex;

flex-wrap: wrap;//换行

.recommend_item{

width: 50%;

border: 5rpx solid #fff;

}

}

.month_row{

.month_title{

display: flex;// 伸缩盒子

justify-content: space-between;//左右各留一部分

padding: 20rpx;

.month_title_info{


color:$color;

font-size: 30rpx;

font-weight: 600;

display: flex;



}

.month_text{

font-size: 34rpx;

color: #666;

margin-left: 30rpx;

}

}

.month_title_more{

font-size: 24rpx;

color: $color;

}

}

.month_content{

display: flex;

flex-wrap:wrap;

.month_item{

width: 33.3%;

border: 5rpx solid #fff;

}

}


.hot_row{

.hot_title{

padding: 20rpx;

text{

border-left: 5rpx solid $color;

padding-left: 20rpx;

font-size: 34rpx;

font-weight: 600;

}

}

.hot_content{

display: flex;

flex-wrap: wrap;

.hot_item{

width: 33.3%;

border: 5rpx solid #fff;

image{


};

}

}

}

</style>

uniapp分页(图1)

uniapp分页(图2)

uniapp分页(图3)

uniapp分页(图4)


您可能还会对下面的文章感兴趣: