phone_uni/pages/template/index.vue

<template>
	<view class="content">
		<custom-layout ref="layout" :showBottom="true" :back="{show:false,logoShow:true}" v-model="dataList"
			@layoutquery="onQueryList" @scroll="onScroll">
			<template #navBarLeft>
				<view class="search-bar_top ml10">
					<up-search placeholder="卡皮巴拉" :showAction="false" borderColor="rgba(0, 224, 176, 1)"
						v-model="searchValue"></up-search>
				</view>
			</template>
			<template #content>
				<up-sticky offset-top="0" customNav-height="0" :bg-color="scrollTop > 40 ? bgColor:''">
					<up-tabs :list="tabs" :line-height="0"
						:active-style="{'fontSize':'30rpx','fontWeight':'600'}"></up-tabs>
				</up-sticky>
				<view class="demo-uni-row">
					<view class="demo-uni-col" v-for="(item,index) in dataList" :key="index"></view>
				</view>
			</template>
		</custom-layout>
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted,
		computed
	} from 'vue';
	import {
		onShow,
	} from "@dcloudio/uni-app";
	import useSystemStore from "~@/store/system.js"
	// 引入状态管理参数
	const {
		bgColor
	} = useSystemStore()
	// 定义变量内容
	const searchValue = ref('卡皮巴拉')
	const tabs = ref([{
			state: -1,
			name: '热门新款',
		},
		{
			state: 1,
			name: '简约'
		},
		{
			state: 2,
			name: '卡通'
		},
		{
			state: 3,
			name: '复古'
		},
		{
			state: 4,
			name: '运动'
		},
		{
			state: 5,
			name: '艺术'
		}, {
			state: 6,
			name: '节日'
		}
	])
	const activeIndex = ref(-1)
	const tabClick = (index, name) => {
		console.log(index, name);
	}

	// 业务列表
	const dataList = ref([{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, ])
	const num = ref(1)
	const layout = ref()
	const onQueryList = (event) => {
		const {
			pageNo,
			pageSize
		} = event
		if (pageNo > 1) {
			if (num.value < 2) {
				num.value++
				layout.value.complete(dataList.value);
			} else {
				layout.value.complete([]);
			}
		} else {
			num.value = 2
			layout.value.complete(dataList.value);
		}
	}
	// 检测页面滚动
	const scrollTop = ref(0)
	const onScroll = (event) => {
		scrollTop.value = event
	}
	// 生命中期
	onMounted(() => {

	})
</script>

<style lang="scss" scoped>
	.search-bar_top {
		width: 46vw;
	}

	// ======导航标签right标签=======
	.tabs_list_box {
		padding: 0 26rpx;
		width: 100vw;
		box-sizing: border-box;
		background: var(--bgColor);

		.tabs-rigth-fixed {
			background: rgba(149, 250, 213, 1);
			border-radius: 50rpx;
			height: 40rpx;
			line-height: 40rpx;
			display: flex;
			align-items: center;
			padding: 0 6rpx;
			box-sizing: border-box;
			font-size: 20rpx;
			font-family: SmileySans-Oblique-2;

			text {
				font-weight: 600;
			}
		}
	}

	// ======liet样式=======
	.demo-uni-row {
		width: 100%;
		padding: 0 26rpx;
		margin-top: 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;

		.demo-uni-col {
			width: calc((100% / 2) - 6rpx);
			height: 500rpx;
			background-color: #ccc;
			border-radius: 13px;
			margin-bottom: 10rpx;

			&:nth-child(2n - 1) {
				margin-right: 10rpx;
			}
		}
	}
</style>