主页面
onReachBottom() {
uni.$emit('onReachBottom', 1);
},
子组件组件
<template>
<view class="list">
<view @click="godetail(item.id)" class="list-item flex-col" :key="i" v-for="(item, i) in list">
<view class="section_6 flex-row">
<view class="left-group flex-col">
<text class="text_6">{{item.title}}</text>
<text class="text_8">{{item.createDate|gettime}}</text>
</view>
<image v-if="item.imageUrl" :src="attach+item.imageUrl" mode="scaleToFill" class="image_2" />
</view>
</view>
</view>
</template>
<script>
import configs from '../../config/config.js'
import moment from 'moment'
import {
newsList
} from '../../config/api.js'
export default {
components: {
},
data() {
return {
list: [],
num: 10,
size: 1,
attach: configs.attach,
status: ''
};
},
mounted() {
var that=this;
that.getdata()
uni.$on('onReachBottom', function(data) {
console.log(data);
that.getmore();
});
},
filters: {
gettime: function(next) {
return moment(next).format("YYYY年MM月DD日 HH:mm")
}
},
methods: {
godetail(id) {
uni.navigateTo({
url: '/pages/news/detail?id=' + id
})
},
getdata() {
var that = this;
that.size = 1
var data = {
limit: that.num.toString(),
page: that.size.toString(),
type: ""
}
newsList(data).then(res => {
if (res.code == 0) {
that.list = res.page.list
}
}).catch(err => {
})
},
getmore() {
var that = this;
that.size = that.size + 1;
that.status = 'loading';
let data = {
limit: that.num.toString(),
page: that.size.toString(),
type: ""
};
newsList(data).then(res => {
console.log(res.data)
var data = res.page.list;
if (!data || data.length == 0) {
that.status = 'nomore';
}
for (var i = 0; i < data.length; i++) {
that.list.push(data[i]);
}
}).catch(err => {
})
},
}
};
</script>
<style lang="scss" scoped>
.list {
width: 690rpx;
margin: 10rpx auto;
.list-item {
filter: drop-shadow(0px 5rpx 16rpx rgba(160, 167, 211, 0.5));
border-radius: 10rpx;
width: 690rpx;
background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/619aed4a8611d00011b5a328/61a6dda6dc329c0011115438/16383261414782472794.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
margin-bottom: 20rpx;
left: 0;
right: 0;
top: 0;
.section_6 {
padding: 23rpx 19rpx 19rpx 39rpx;
border-radius: 10rpx;
border: solid 2rpx rgb(255, 255, 255);
.left-group {
flex: 1 1 auto;
.text_6 {
color: rgb(0, 0, 0);
font-size: 28rpx;
font-weight: 700;
line-height: 40rpx;
text-transform: uppercase;
}
.text_8 {
margin-top: 32rpx;
color: rgb(153, 153, 153);
font-size: 24rpx;
font-weight: 700;
line-height: 23rpx;
white-space: nowrap;
text-transform: uppercase;
}
}
.image_2 {
border-radius: 10rpx;
width: 175rpx;
height: 147rpx;
}
}
}
}
</style>