<template>
<view class="goods-list">
<goods-list :goods="goods"></goods-list>
<view>我是有底线的</view>
</view>
</template>
<script>
import goodsList from '../../components/goods-list/goods-list.vue'
export default {
data() {
return {
pageindex: 1,
goods: [],
flag: false
}
},
components: {"goods-list": goodsList},
methods: {
async goodsList(callBack) {
const res = await uni.$myRequest({
url: '/api/getGoods?pageindex='+this.pageindex
})
this.goods = [...this.goods, ...res.data.message]
callBack && callBack()
}
},
onLoad() {
this.getGoodsList()
},
onReachBottom() {
// 上拉加载
if (this.goods.length < 10) return this.flag = true
console.log('触底了')
this.pageindex++
this.goodsList()
},
onPullDownRefresh() {
// 下拉刷新
console.log('下拉刷新了')
this.pageindex = 1
this.goods = []
this.falg = false
setTimeout(()=>{
this.goodsList(()=>{
uni.stopPullDownRefresh()
})
}, 1000)
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
goods-list.vue
<template>
<view class="goods-list">
<view class="goods-item" v-for="item in goods" :key="item.id">
<iamge :src="item.img_url"></iamge>
<view class="price">
<text>{{item.sell_price}}</text>
<text>{{item.market_price}}</text>
</view>
<view class="name">
{{item.title}}
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
props:['goods'],
methods: {
}
}
</script>
<style>
</style>
