<template>
	<view class="c-wrap">
		<view class="search-wrap">
			<u-search class="search" :show-action="true" @custom="searchBank" @search="search" action-text="搜索"
				placeholder="请搜索工地名称" :animation="true">
			</u-search>
		</view>

		<view class="nav">
			<u-tabs :list="orderFilter" :current="currentTab" @change="changeTab"></u-tabs>
		</view>

		<swiper class="swiper-h" @change='onChangeTab' :current="swiperCurrent">
			<swiper-item class="swiper-item" v-for="(item, index) in orderFilter" :key="index">
				<scroll-view class="swiper-h" scroll-y @scrolltolower="onreachBottom">
					<template v-for="(item,index) in orderData">
						<view class="item">
							{{index}}
						</view>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0,
				swiperCurrent: 0,
				orderFilter: [{
					name: '新闻'
				}, {
					name: '财经'
				}, {
					name: '国际'
				}, {
					name: '福彩'
				}],
				orderData: [{}, {}, {}, {}],
			}
		},
		methods: {
			changeTab(index) {
				this.currentTab = index;
				this.swiperCurrent = index;
			},
			onChangeTab(e) {
				this.changeTab(e.detail.current);
			},
			// scroll-view到底部加载更多
			onreachBottom() {
			   //这里写分页
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		padding: 10px 15px;
	}

	.search-wrap {
		background-color: #FFFFFF;
		height: 50px;
	}

	.nav {
		background-color: #FFFFFF;
		height: 38px;

		/deep/ .u-tab-bar {
			bottom: 4px;
		}

		/deep/ .u-scroll-box {
			display: flex;
			justify-content: space-between;
		}
	}

	.swiper-h {
		height: calc(100vh - 144px);
	}

	.item {
		width: calc(100vw - 24px);
		height: 150px;
		margin: 12px;
		background-color: white;
		border-radius: 8px;
		text-align: center;
		line-height: 150px;
	}
</style>

注意

1. 使用到了 uview 里的 u-search 和 u-tabs，需要自行引入
2. 将 类search-wrap 所在的元素和 类nav 所在的元素的高度都固定为一个常量，然后 swiper组件 和 scroll-view组件 的高度就等于 100vh - 88px - 44px
3. 44px是页面头部的高度

下面是效果图