Day2—4：前端项目uniapp壁纸实战

接下来做一个分类页面

在pages上新建一个classify页面

<template>
	<view class="classLayout">
		<view class="classify">
			<theme-item v-for="item in 15"></theme-item>
		</view>
		
	</view>
</template>

<script setup>
	
</script>

<style lang="scss" scoped>
	.classify{
		padding: 30rpx;
		display: grid;
		grid-template-columns: repeat(3,1fr);
		gap: 15rpx;
	}
</style>

这样，基本布局就构建出来了

同时，我们在pages创建一个新的页面user

<template>
	<view class="">
		我的
	</view>
</template>

<script setup>
	
</script>

<style lang="scss" scoped>

</style>

现在我们是有三个页面，接下来，我们去pages.json把那个底部的导航做出来

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "Kx...壁纸"
			}
		}
	    ,{
            "path" : "pages/classify/classify",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "分类",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/user/user",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "我的",
                "enablePullDownRefresh": false
            }
            
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		"list": [
			{
				"text":"推荐",
				"pagePath": "pages/index/index"
			},
			{
				"text":"分类",
				"pagePath": "pages/classify/classify"
			},
			{
				"text":"我的",
				"pagePath": "pages/user/user"
			}
		]
	},
	"uniIdRouter": {}
}

这样就做出来了

现在我们来做一个好看的图标

去到阿里巴巴矢量图标库，iconfont-阿里巴巴矢量图标库

找到自己喜欢的图标，下载下来，要记得再下载一个灰色的

推荐和分类也一样，下载下来放到static下面

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "Kx...壁纸"
			}
		}
	    ,{
            "path" : "pages/classify/classify",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "分类",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/user/user",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "我的",
                "enablePullDownRefresh": false
            }
            
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		"list": [
			{
				"text":"推荐",
				"pagePath": "pages/index/index",
				"iconPath": "static/推荐 (3).png",
				"selectedIconPath": "static/推荐 (2).png"
			},
			{
				"text":"分类",
				"pagePath": "pages/classify/classify",
				"iconPath": "static/分类 (3).png",
				"selectedIconPath": "static/分类 (2).png"
			},
			{
				"text":"我的",
				"pagePath": "pages/user/user",
				"iconPath": "static/我的-copy (3).png",
				"selectedIconPath": "static/我的-copy (2).png"
			}
		]
	},
	"uniIdRouter": {}
}

放进来，效果就变好看了

如果没看懂，可以到我的主页看一下tabBar节点实现多页面的转换