cover

uni-app项目（分类页）

uni-app项目（分类页）

ʚ浅初.ɞ

3751人浏览 · 2022-03-16 11:26:54

ʚ浅初.ɞ · 2022-03-16 11:26:54 发布

分类页模板

一、搜索框部分

先制作一个假的搜索框，之后再做一个专门搜索的页面，点击搜索框跳到搜索页面

页面布局

<template>
	<view class="classify">
		<!-- 搜索框 -->
		<view class="search">
			<view class="search-content">
				<!-- 在uni-app官网找的图标 -->
				<uni-icons type="search" size="26" color="#9F9F9F"></uni-icons>
				<text>搜索家居服装</text>
			</view>
		</view>
	</view>
</template>

页面样式

*{
	margin: 0;
	padding: 0;
}
.classify{
	background-color: #fff;
}
.search{
	width: 100%;
	height: 100rpx;
	display: flex;
	align-items: center;
	.search-content{
		width: 90%;
		height: 70rpx;
		margin:auto;
		border: 1px solid #E6E6E6;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #9F9F9F;
		text{
			margin-left: 10rpx;
		}
	}
}

效果图：

二、分类部分

和首页的商品列表部分很相似，商品列表部分是上下，分类是左右

看设计图不需要滚动，所以和商品列表写法相同，只是不同的样式和后台数据

需要滚动的基本结构：
<scroll-view scroll-y class="cate-left">

</scroll-view>
<scroll-view scroll-y class="cate-right">

</scroll-view>

左侧部分

页面布局

<!-- 分类部分 -->
		<view class="cate-container">
			<view class="cate-left">
				 <view :class="['cate-item',activeIndex==index?'active':'']" v-for="(item,index) in cateList" :key="index" @click="changeActive(index)">{{item.classifyName}}</view>
			</view>
			<view class="cate-right">
				<view class="cate-content">
					<!-- <image src="../../static/c1.png" mode=""></image>
					<view class="cate-text">牛仔裤</view> -->
				</view>
			</view>
		</view>

页面样式

.cate-container{
		width: 100%;
		height: 1000rpx;
		display: flex;
		.cate-left{
			width: 200rpx;
			background-color: #F6F6F6;
			.cate-item{
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				padding-left: 40rpx;
				box-sizing: border-box;
			}
			.active{
				background-color: #FFFFFF;
				position: relative;
				padding-left: 40rpx;
				box-sizing: border-box;
				&::before{
					content: '';
					display:block;
					width: 10rpx;
					border-radius: 6rpx;
					height: 40rpx;
					background-color: #FC4353;
					position: absolute;
					left: 0rpx;
					top: 30rpx;
				}
			}
		}
		.cate-right{
			flex: 1;
			background-color: #007AFF;
		}
	}

后台数据

连接后台

<script>
	export default {
		data() {
			return {
				// 初始化的分类列表
				cateList:[],
				// 当前点击项的索引号
				activeIndex:0
			};
		},
		methods:{
			async getcateList(){
				const res=await uni.$http.get('/classify')
				console.log(res)
				const {data:{classify,code}}=res
				if(code!=200){
					return uni.showToast({
						title:'加载数据失败',
						duration:1000,
						icon:'none'
					})
				}else{
					this.cateList=classify
				}
			},
			//更改点击项的索引号
			changeActive(i){
				this.activeIndex=i
			}
		},
		onLoad() {
			this.getcateList()
		}
	}
</script>

效果图：

右侧部分

页面布局

<!-- 分类部分 -->
		<view class="cate-container">
			。。。
			<view class="cate-right">
				<view class="cate-content" v-for="(goodItem,goodIndex) in goodList" :key="goodIndex">
					<image :src="goodItem.picUrl" mode=""></image>
					<view class="cate-text">{{goodItem.text}}</view>
				</view>
			</view>
		</view>

页面样式

.cate-container{
		width: 100%;
		display: flex;
		。。。
		.cate-right{
			flex: 1;
			display: flex;
			flex-wrap: wrap;
			height: 300rpx;
			.cate-content{
				width: 33%;
				height: 200rpx;
				text-align: center;
				image{
					width: 100rpx;
					height: 100rpx;
				}
				.cate-text{
					
				}
			}
		}
	}

后台数据

连接后台

<script>
	export default {
		data() {
			return {
				// 初始化的分类列表
				cateList:[],
				// 当前点击项的索引号
				activeIndex:0,
				// 分类下的商品信息
				goodList:[]
			};
		},
		methods:{
			async getcateList(){
				const res=await uni.$http.get('/classify')
				console.log(res)
				const {data:{classify,code}}=res
				if(code!=200){
					return uni.showToast({
						title:'加载数据失败',
						duration:1000,
						icon:'none'
					})
				}else{
					this.cateList=classify
					// 获取第一个分类下的商品
					this.goodList=classify[0].children
				}
			},
			//更改点击项的索引号
			changeActive(i){
				this.activeIndex=i
				// 已经获取到索引号
				this.goodList=this.cateList[i].children
			}
		},
		onLoad() {
			this.getcateList()
		}
	}
</script>

整体代码

<template>
	<view class="classify">
		<!-- 搜索框 -->
		<view class="search">
			<view class="search-content" @click="goToSearch">
				<!-- 在uni-app官网找的图标 -->
				<uni-icons type="search" size="26" color="#9F9F9F"></uni-icons>
				<text>搜索家居服装</text>
			</view>
		</view>
		<!-- 分类部分 -->
		<view class="cate-container">
			<view class="cate-left">
				 <view :class="['cate-item',activeIndex==index?'active':'']" v-for="(item,index) in cateList" :key="index" @click="changeActive(index)">{{item.classifyName}}</view>
			</view>
			<view class="cate-right">
				<view class="cate-content" v-for="(goodItem,goodIndex) in goodList" :key="goodIndex">
					<image :src="goodItem.picUrl" mode=""></image>
					<view class="cate-text">{{goodItem.text}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 初始化的分类列表
				cateList:[],
				// 当前点击项的索引号
				activeIndex:0,
				// 分类下的商品信息
				goodList:[]
			};
		},
		methods:{
			async getcateList(){
				const res=await uni.$http.get('/classify')
				console.log(res)
				const {data:{classify,code}}=res
				if(code!=200){
					return uni.showToast({
						title:'加载数据失败',
						duration:1000,
						icon:'none'
					})
				}else{
					this.cateList=classify
					// 获取第一个分类下的商品
					this.goodList=classify[0].children
				}
			},
			//更改点击项的索引号
			changeActive(i){
				this.activeIndex=i
				// 已经获取到索引号
				this.goodList=this.cateList[i].children
			},
			//点击搜索框跳转到搜索页面
			goToSearch:function(){
				uni.navigateTo({
					url:'/subpkg/goods-search/goods-search'
				})
			}
		},
		onLoad() {
			this.getcateList()
		}
	}
</script>

<style lang="scss">
*{
	margin: 0;
	padding: 0;
}
.classify{
	background-color: #fff;
	.search{
		width: 100%;
		height: 134rpx;
		display: flex;
		align-items: center;
		.search-content{
			width: 90%;
			height: 80rpx;
			margin:auto;
			border: 1px solid #E6E6E6;
			border-radius: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #9F9F9F;
			text{
				margin-left: 10rpx;
			}
		}
	}
	.cate-container{
		width: 100%;
		display: flex;
		.cate-left{
			width: 200rpx;
			background-color: #F6F6F6;
			.cate-item{
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				padding-left: 40rpx;
				box-sizing: border-box;
			}
			.active{
				background-color: #FFFFFF;
				position: relative;
				padding-left: 40rpx;
				box-sizing: border-box;
				&::before{
					content: '';
					display:block;
					width: 10rpx;
					border-radius: 6rpx;
					height: 40rpx;
					background-color: #FC4353;
					position: absolute;
					left: 0rpx;
					top: 30rpx;
				}
			}
		}
		.cate-right{
			flex: 1;
			display: flex;
			flex-wrap: wrap;
			height: 300rpx;
			.cate-content{
				width: 33%;
				height: 200rpx;
				text-align: center;
				image{
					width: 100rpx;
					height: 100rpx;
				}
				.cate-text{
					font-size: 34rpx;
				}
			}
		}
	}
}

</style>

最终效果图：

华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

GaussDB数据库如何创建修改数据库和数据表

华为云开发者联盟

cover

一文带你理解透MyBatis源码

华为云开发者联盟

cover

LLVM技术在GaussDB等数据库中的应用

华为云开发者联盟

所有评论(0)

查看更多评论

ʚ浅初.ɞ

已为社区贡献4条内容