求助!!!!
求助大神帮我看看这段代码中,为什么瀑布流中没有数据显示,数据都通过接口正确查询出来了。
<view class="waterfall">
<!-- 搜索框 -->
<u-search v-model="keywords" @change="searchBtn" :show-action="true" action-text="搜索"
:animation="true"></u-search>
<view class="tab-strickt">
<u-tabs active-color="#00aaff" name="categoryName" count="cate_count" :list="tabList" :is-scroll="true"
v-model="current" @change="change"></u-tabs>
</view>
<!-- <view class="u-waterfall"> -->
<u-waterfall v-model="flowList" ref="uWaterfall1">
<view class="demo-warter" v-for="(item, index) in flowList" :key="index">
<!-- 警告:微信小程序中需要hx2.8.11版本才支持在template中结合其他组件,比如下方的lazy-load组件 -->
<view class="demo-demandsName">
{{item.demandsName}}
</view>
<view class="demo-demandsDesc">
{{item.demandsDesc}}
</view>
<view class="demo-businessName">
{{item.businessName}}
</view>
<view class="demo-categoryName">
{{item.categoryName}}
</view>
<view class="demo-createTime">
{{item.createTime}}
</view>
</view>
</u-waterfall>
<!-- </view> -->
<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="loadMore"></u-loadmore>
</view>
</template>
<script setup>
import {
ref
} from 'vue';
import {
random
} from '@/uni_modules/uv-ui-tools/libs/function/index.js'
import {
onLoad,
onReachBottom,
onReady
} from '@dcloudio/uni-app'
import {
getCategoryListApi,
getDemandsListApi
} from '../../api/demands.js'
const uWaterfall1 = ref()
const loadStatus = ref('loadmore')
//瀑布流
const flowList = ref([])
const tabList = ref([])
const current = ref(0)
const indexList = ref([])
const list = ref([{
name: '全部'
},
{
name: '产品'
},
{
name: '人才'
},
{
name: '会展'
},
{
name: '其他'
}
])
// 获取分类数据
const getCategoryList = async () => {
let res = await getCategoryListApi()
if (res && res.code == 200) {
tabList.value = res.data;
// console.log(res)
// 分类数据的第一位添加全部
tabList.value.unshift({
categoryId: '',
categoryName: '全部',
orderNum: 0,
})
}
}
//分类点击事件
const categoryId = ref('')
const change = (e) => {
categoryId.value = tabList.value[e].categoryId
// console.log(categoryId.value)
//清空列表数据
currentPage.value = 1;
//清空瀑布流的数据
// uWaterfall1.value.clear()
flowList.value = [];
//调用列表
getDemandsList()
}
//获取需求列表数据
const currentPage = ref(1)
const pageSize = ref(10)
const keywords = ref('')
const pages = ref(0)
const getDemandsList = async () => {
let res = await getDemandsListApi({
currentPage: currentPage.value,
pageSize: pageSize.value,
categoryId: categoryId.value,
keywords: keywords.value
})
if (res && res.code == 200) {
// console.log(res)
// flowList.value = flowList.value.concat(res.data.records)
flowList.value = res.data.records
pages.value = res.data.pages
console.log(res.data.records)
}
}
//关键字搜索
const searchBtn = () => {
currentPage.value = 1;
//清空瀑布流的数据
// uWaterfall1.value.clear()
flowList.value = [];
//获取数据
getDemandsList()
}
//加载更多
const loadMore = () => {
console.log('加载更多')
if (currentPage.value >= pages.value) {
loadStatus.value = 'nomore'
return;
}
loadStatus.value = 'loading'
//页数加1
currentPage.value = ++currentPage.value;
//获取数据
getDemandsList()
}
//触底加载
onReachBottom(() => {
console.log('触底加载')
if (currentPage.value >= pages.value) {
loadStatus.value = 'nomore'
return;
}
loadStatus.value = 'loading'
//页数加1
currentPage.value = ++currentPage.value;
//获取数据
getDemandsList()
})
onReady(() => {
getDemandsList()
getCategoryList()
})
</script>