novelAD/pages/tools/jingXuanBiZhi.vue

<template>
	<view class="content">
		<view  :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="flex scroll-x ai_end mgt-20" style="gap: 50rpx;">
				<view class="text-28 text-999 cursor" :class="active == tab.id?'active':''"
				 v-for="(tab,index) in category" @click="chooseTab(tab)">
					{{ tab.name }}
				</view>
			</view>
			<view class="flex mgt-40">
				<view class="w-220 h-120 flex ai_center jc_center bg-white radio-20 mgr-20">
					流行壁纸
				</view>
				<view class="w-220 h-120 flex ai_center jc_center bg-white radio-20">
					最新壁纸
				</view>
			</view>
			<view class="imgs mgt-40 flex fw_wrap" style="gap: 14rpx;">
				<image class="w-220 h-280 radio-16" mode="aspectFill"
				v-for="img in category[active-1].list" :src="img">
					
				</image>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onShow } from "@dcloudio/uni-app";
var statusBarHeight = uni.getStorageSync('statusBarHeight')
const category = ref([
	{ name:'风景',list:[
		'https://img2.baidu.com/it/u=643390968,3821598343&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
		'https://img2.baidu.com/it/u=1207164141,4244022854&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
		'https://img2.baidu.com/it/u=2122730436,3330551883&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
		'https://img2.baidu.com/it/u=1934414271,796431517&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'
	],id:1 },
	{ name:'设计',list:[],id:2 },
	{ name:'物语',list:[],id:3 },
	{ name:'城市',list:[],id:4 },
])
const active = ref(1)
const chooseTab = (tab) =>{
	active.value = tab.id
}
onMounted(()=>{
	
})
</script>

<style lang="scss" scoped>
	.content{
		height: 100vh;
		padding: 28rpx;
		background: linear-gradient(to bottom, #a9d4ff, #cce6ff);
	}
	.active{
		color: #000;
		font-weight: 500;
		font-size: 30rpx;
	}
</style>