100 lines
3.6 KiB
Vue
100 lines
3.6 KiB
Vue
<template>
|
||
<view class="">
|
||
<mescroll-uni ref="mescrollRef" top="0" bottom="200rpx" :height="height" @init="mescrollInit"
|
||
@down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
|
||
<u-waterfall ref="uWaterfall" v-model="lists" :add-time="50">
|
||
<template v-slot:left="{leftList}">
|
||
<view style="padding:0 9rpx 0 30rpx">
|
||
<community-list width="336rpx" type="waterfall" :list="leftList"></community-list>
|
||
</view>
|
||
</template>
|
||
<template v-slot:right="{rightList}">
|
||
<view style="padding:0 30rpx 0 9rpx;">
|
||
<community-list width="336rpx" type="waterfall" :list="rightList"></community-list>
|
||
</view>
|
||
</template>
|
||
</u-waterfall>
|
||
</mescroll-uni>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getCommunityArticleLists
|
||
} from '@/api/community.js';
|
||
import {
|
||
trottle
|
||
} from "@/utils/tools.js"
|
||
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
||
import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
|
||
export default {
|
||
mixins: [MescrollMixin, MescrollMoreItemMixin],
|
||
props: {
|
||
cateId: {
|
||
type: [String, Number]
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
height: '',
|
||
upOption: {
|
||
empty: {
|
||
icon: '/static/images/news_null.png',
|
||
tip: '暂无任何内容...', // 提示
|
||
fixed: true,
|
||
top: "0",
|
||
}
|
||
},
|
||
lists: []
|
||
}
|
||
},
|
||
mounted() {
|
||
uni.$on('changeItem', (event) => {
|
||
const index = this.lists.findIndex(el => el.id == event.id)
|
||
if (index == -1) return
|
||
this.$refs.uWaterfall.modify(event.id, 'like', event.like)
|
||
this.$refs.uWaterfall.modify(event.id, 'is_like', event.is_like)
|
||
})
|
||
|
||
uni.getSystemInfo({
|
||
success: (res) => {
|
||
this.height = res.windowHeight - 46 + 'px';
|
||
}
|
||
});
|
||
},
|
||
methods: {
|
||
// 获取
|
||
async upCallback(page) {
|
||
const pageNum = page.num
|
||
const pageSize = page.size
|
||
|
||
getCommunityArticleLists({
|
||
cate_id: this.cateId,
|
||
page_no: pageNum,
|
||
page_size: pageSize,
|
||
}).then(res => {
|
||
// 如果是第一页需手动置空列表
|
||
if (pageNum == 1) {
|
||
this.$refs.uWaterfall.clear()
|
||
this.lists = []
|
||
}
|
||
// 重置列表数据
|
||
const hasNext = !!res.data.more;
|
||
// 异步：让vue能够监听到数据改变过了
|
||
|
||
// has_new 是通知父组件将关注右上角的是否新更新小点显示或隐藏
|
||
uni.$emit('hasNew', res.data.has_new)
|
||
|
||
setTimeout(() => {
|
||
this.lists = [...this.lists, ...res.data.list]
|
||
}, 0)
|
||
this.mescroll.endSuccess(res.data.list.length, hasNext);
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
</style>
|