1.先放上图片子再放代码
2.下面是实现的代码
<template>
<view>
<view class="news_list" v-for="(item, index) in newsList" :key="index">
<view class="news_img">
<image :src="item.image" mode="widthFix"></image>
</view>
<view class="news_info">
<view class="news_text">{{ item.title }}</view>
<view class="news_time">{{ item.passtime }}</view>
</view>
</view>
<p class="title" v-if="flag">-----兄弟,到底了-----</p>
</view>
</template>
<script>
export default {
data() {
return {
page : 1 ,
newsList : [],
flag : false,
}
},
onLoad() {
this.getNews()
},
onPageScroll(){ //页面滚动到底部是请求下一页数据
if(this.newsList.length < this.page * 10) return this.flag = true;
this.page ++;
// console.log('触底');
this.getNews()
},
onPullDownRefresh(){ //页面下拉刷新
this.page = 1;
this.newsList = [];
this.flag = false;
this.getNews();
uni.stopPullDownRefresh(); //跳转刷新
console.log('刷新了');
},
methods: {
getNews(){
uni.request({
url:"https://api.apiopen.top/getWangYiNews",
method:"POST",
data: {
page: this.page,
count: 10
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: (res) => {
console.log(res.data.result);
this.newsList = [...this.newsList , ...res.data.result]
}
})
}
},
}
</script>
<style>
.news_list{
height: 160rpx;
border-bottom: 1px solid #ccc;
display: flex;
/* background-color: #4CD964 */
}
.news_img{
width: 160rpx;
height:160rpx;
margin: 0 15rpx;
display: flex;
justify-content: center;
align-items: center;
}
.news_img image{
width: 100%;
}
.news_info{
width: 500rpx;
/* font-size: .24rem; */
display: flex;
flex-direction: column;
justify-content: center;
}
.title{
text-align: center;
padding: 20rpx 0;
height: 50rpx;
line-height: 50rpx;
}
</style>