mp_exhibitor_miniprog/pages/news/index.vue

<template>
	<view class="news-index">
		<nav-bar title="新闻" @init="onInitNavbar"></nav-bar>
		<u-scroll-view :tabbar-conflict="false">
			<view class="main-container">
				<u-tabs :active.sync="tabActive" :tabs="tabs" tab-style="default" @change="tabChange"/>
				<van-empty v-if="newsList.length === 0" description="暂无数据" />
				<view v-else class="news-list">	
					<template v-for="(item, index) in newsList">
						<news-item :item="item" :key="index" />
					</template>	
				</view>
			</view>
		</u-scroll-view>
	</view>
</template>

<script>
	import NavBar from '@/components/layout/nav-bar'
	import UTabs from '@/components/common/u-tabs'
	import UScrollView from '@/components/common/u-scroll-view'
	import NewsItem from '@/pages/news/components/news-item.vue'
	
	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
			NavBar,
			UTabs,
			UScrollView,
			NewsItem
		},
		data() {
			return {
				tabActive: 'exhibition',
				tabs: [{
					label: '展会新闻',
					value: 'exhibition'
				}, {
					label: '展商新闻',
					value: 'exhibitor'
				}],
				newsList: [{}, {}, {}, {}, {}, {}]
			}
		},
		onLoad(options) {
			if (options.type) {
				this.tabActive = options.type
			}
		},
		created() {},
		methods: {
			tabChange() {
				
			}
		}
	}
</script>

<style lang="scss">
	.news-list{
		display: grid;
		grid-template-columns: 1fr;
		grid-row-gap: 18rpx;
		margin-top: 28rpx;
	}
</style>