求助!!!!小程序开发,前端没有正确显示数据,我是菜鸟QAQ

131 阅读1分钟

求助!!!!

求助大神帮我看看这段代码中,为什么瀑布流中没有数据显示,数据都通过接口正确查询出来了。

	<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>