yunshengtai-uniapp/pages/information/index.vue

<template>
	<view class="information-box">
		<!-- 顶部主页 -->
		<view class="head_box" :style="[{height:CustomBar + 'px'}]">
			<cu-custom :isBack="true">
				<block slot="backText">
					<text class="nav-title shopro-selector-rect">资讯</text>
				</block>
			</cu-custom>
		</view>
		<TabNav :tabList="cateList" @tabItemClick="tabItemClick"></TabNav>
		<InformationList :list="inforList"></InformationList>
		<u-loadmore :status="status" :marginTop="30" />
	</view>
</template>

<script>
	import {
		getArticle
	} from "@/api/home";
	import {
		articleIndex
	} from "@/api/article"
	import LoadStatus from "@/components/LoadStatus"
	import skeleton from '@/components/quick-skeleton/quick-skeleton'
	import tabNav from '../home/components/tabNav.vue'
	import informationList from './components/informationList.vue'
	export default {
		components: {
			LoadStatus,
			skeleton,
			tabNav,
			informationList
		},
		data() {
			return {
				newList: [],
				inforList: [],
				cateList: [],
				cid: null,
				page: 0,
				size: 10,
				showSkeleton: true,
				status: 'nomore',
			}
		},
		mounted() {
			this.getArticleIndex().then(()=>{
				this.cid = this.cateList[0].id
			})
		},
		onReachBottom() {
			this.page = this.page + 1
		},
		watch: {
			cid: {
				handler(val) {
					console.log(val)
					this.inforList = this.newList.filter((item) => item.cid == val)
				},
				immediate: true
			},
		},
		onPullDownRefresh() {
			this.getArticleIndex()
		},
		onReady: function() {
			const that = this;
		},
		methods: {
			async getArticleIndex() {
				uni.showLoading({
					title: '正在加载中...',
				})
				let res = await articleIndex()
				this.cateList = res.data.categoryList
				this.newList = res.data.newList
				// if(this.cid == null){
				// 	this.cid = this.cateList[0].id
				// }
				
				uni.hideLoading()
				uni.stopPullDownRefresh()
			},
			tabItemClick(val) {
				this.cid = this.cateList[val].id
			}
		}
	}
</script>

<style lang="less">
	.information-box {
		width: 100%;
		min-height: 100vh;
		background: #fff;
		border-bottom: 26rpx solid #F7F7F7;
	}

	.nav-title {
		font-size: 48rpx;
		font-weight: 500;
		color: #06050A;
		margin-left: 20rpx;
		line-height: 40px;
	}

	.cuIcon-back {
		display: none;
	}
</style>