phone_uni/pages/material/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 10" :key="index">
						<view class="list_left">
							<up-image :show-loading="true" :src="ceshiimage" radius="20rpx" width="161.95rpx"
								height="155.87rpx"></up-image>
						</view>
						<view class="list_center">
							<view class="list_c_t">语气贴贴</view>
							<view class="list_c_b">
								<view v-for="(items,indexs) in 3" :key="indexs" class="list_c_b_item">
									<up-image :show-loading="true" :src="ceshiicon" radius="20rpx" width="114rpx"
										height="106rpx"></up-image>
								</view>
							</view>
						</view>
						<view class="list_right">
							<view class="mini_btn">下载</view>
						</view>
					</view>
				</view>
			</template>
		</custom-layout>
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted,
		computed
	} from 'vue';
	import {
		onShow,
		onPageScroll
	} from "@dcloudio/uni-app";
	// 引入组件

	// 引入状态管理参数
	import useSystemStore from "~@/store/system.js"
	const {
		bgColor
	} = useSystemStore()
	// 定义变量内容

	const ceshiimage = 'https://img.js.design/assets/img/66f77cb0c6ebda7a2a394736.png#846fab95fed56db08fcbc92025765a68'
	const ceshiicon = 'https://img.js.design/assets/img/66f7f501b50663ba27c0adc7.png#5e31df675fe6a23fe7219d6fe07b48b4'

	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: '婚礼'
		}, {
			state: 7,
			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: 100%;
			border-radius: 13px;
			margin-bottom: 10rpx;
			background-color: #fff;
			padding: 13rpx 20rpx 13rpx 10rpx;
			box-sizing: border-box;
			display: flex;

			.list_left {
				width: 161.95rpx;
				height: 155.87rpx;
			}

			.list_center {
				width: calc(100% - 161.95rpx - 80rpx);
				height: 155.87rpx;
				padding: 0 10rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.list_c_t {
					font-size: 28rpx;
					font-weight: 600;
					letter-spacing: 0rpx;
					line-height: 38.42rpx;
					color: rgba(0, 0, 0, 1);
					text-align: left;
					vertical-align: top;
					margin-top: 10rpx;
				}

				.list_c_b {
					display: flex;

					.list_c_b_item {
						width: 114rpx;
						height: 106rpx;
						background-image: url(var(--iconImage));
						background-size: 100% 100%;
					}
				}
			}

			.list_right {
				width: 80rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.mini_btn {
					width: 100%;
					border-radius: 50rpx;
					padding: 4rpx 0;
					background-color: #000;
					color: #fff;
					text-align: center;
					font-size: 24rpx;
				}
			}
		}
	}
</style>