商城小程序（3.分类页面）

最新推荐文章于 2024-04-30 10:55:46 发布
最新推荐文章于 2024-04-30 10:55:46 发布
阅读量1.6k 收藏 27
点赞数 22
分类专栏： 商城小程序学习笔记 文章标签： 小程序 前端 javascript 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Kiritoasu/article/details/135214634
版权

目录

效果展示：并实现左右栏的上下滑动
在这里插入图片描述

一、渲染分类页面的基本结构

1、基本结构

首先设置左右两栏滑动区域

主要用到scroll-view组件定义可滚动视图
在这里插入图片描述

其中scroll-y -x 用于定义横向还是纵向滑动
在这里插入图片描述

	<view>
		<view class="scroll-view-container">
			<!-- 左侧的滑动区域 -->
			<scroll-view class="left-scroll-view" scroll-y="true" :style="{height: wh + 'px'}">
				<view>11111111</view>
				<view>11111111</view>
				<view>11111111</view>
				<view>11111111</view>
				<view>11111111</view>
				<view>11111111</view>
				<view>11111111</view>
				<view>11111111</view>
				<view>11111111</view>
				<view>11111111</view>
				<view>11111111</view>
				<view>11111111</view>
				<view>11111111</view>
				<view>11111111</view>
				<view>11111111</view>
				<view>11111111</view>
				<view>11111111</view>
			</scroll-view>
			<!-- 右侧的滑动区域 -->
			<scroll-view scroll-y="true" :style="{height: wh + 'px'}">
				<view>11111111</view>
				<view>11111111</view>
				<view>11111111</view>
				<view>11111111</view>
				<view>11111111</view>
				<view>11111111</view>
				<view>11111111</view>
				<view>11111111</view>
				<view>11111111</view>
				<view>11111111</view>
				<view>11111111</view>
				<view>11111111</view>
				<view>11111111</view>
				<view>11111111</view>
				<view>11111111</view>
				<view>11111111</view>
				<view>11111111</view>
				<view>11111111</view>
			</scroll-view>
		</view>
	</view>

2、自动适应屏幕

用到uni自带的api获取系统信息
在这里插入图片描述

定义onload加载信息，并赋值给高度

<script>
	export default {
		data() {
			return {
				// 当前设备可用高度
				wh: 0
			}
		},
		onLoad() {
			const sysInfo = uni.getSystemInfoSync()
			this.wh = sysInfo.windowHeight
		}
	}
</script>

把页面高度动态绑定

			<scroll-view scroll-y="true" :style="{height: wh + 'px'}">

3、界面细化

左侧滑动区域我们都可以先给个名来设计我们的样式

active表示当前选中的（这边后面再改动态，我们先设计样式）
在这里插入图片描述

style下css样式，具体的含义就不展示了。

主要注意&的使用，表示同时满足上目录与当前拼接时才会触发下面的样式（就是我们的第一栏left-scroll-view-item-active）

.scroll-view-container{
	display: flex;
	
	.left-scroll-view{
		width: 120px;
		
		.left-scroll-view-item{
			background-color: #F7F7F7;
			line-height: 60px;
			text-align: center;
			font-size: 12px;
			
			&.active {
				background-color: #FFFFFF;
				position: relative;
				
				&::before{
					content: ' ';
					display: block;
					width: 3px;
					height: 30px;
					background-color: #C00000;
					position: absolute;
					top: 50%;
					left: 0;
					transform: translateY(-50%);
				}
			}
		}
	}
}

在这里插入图片描述

二、获取分类数据

同之前一样 分为3步骤
在这里插入图片描述

		methods: {
			// 获取分类列表数据
			async getCateList() {
				const {data : res} = await uni.request({
					url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories',
					method: 'GET'
				})
				if(res.meta.status !== 200){
					return uni.showToast({
						title: '数据请求失败！',
						duration: 1500,
						icon: 'none',
					})
				}
				this.cateList = res.message
				uni.$showMsg('数据请求成功！')
			}
		}

三、动态渲染左侧的一级分类列表

将左侧滑动数据改为动态获取：从catelist中获取数据，用for循环遍历

			<!-- 左侧的滑动区域 -->
			<scroll-view class="left-scroll-view" scroll-y="true" :style="{height: wh + 'px'}">
				<block v-for="(item, i) in cateList" :key="i">
					<view :class="['left-scroll-view-item', i=== active ? 'active' : '']" @click="activeChanged(i)">
						{{item.cat_name}}</view>
				</block>
			</scroll-view>

其中要实现之前的点击事件，选中的栏位样式与其他框不同

定义active值，并与动态索引key i绑定（调用cativeChanged方法）
在这里插入图片描述
实现动态展示数据，以及点击事件切换样式

在这里插入图片描述

四、渲染二级分类列表

先来看看后端接口返回的数据格式：一级分类的数据children下保存的是二级分类信息，二级分类

的children下又保存三级分类的信息
在这里插入图片描述
用同样的方法获取数据，这次直接在获取一级分类数据的基础上，直接给二级分类赋值
在这里插入图片描述
修改点击事件：每次点击时，重新为二级分类赋值，查询当前一级目录的二级分类
在这里插入图片描述

渲染右侧二级分类列表的UI结构

			<!-- 右侧的滑动区域 -->
			<scroll-view scroll-y="true" :style="{height: wh + 'px'}">
				<view class="cate-lv2" v-for="(item2, i2) in cateList2" :key="i2">
					<view class="cate-lv2-title">/ {{item2.cat_name}} /</view>
				</view>
			</scroll-view>

美化二级分类的样式

	.cate-lv2-title {
		font-size: 12px;
		font-weight: bold;
		text-align: center;
		padding: 15px 0;
	}

在这里插入图片描述
点击切换也成功获取新的二级分类
在这里插入图片描述

五、动态渲染右侧三级分类列表

渲染三级分类的UI（直接从item2二级分类中，拿出我们的三级分类数据，并重新循环遍历）

			<!-- 右侧的滑动区域 -->
			<scroll-view scroll-y="true" :style="{height: wh + 'px'}">
				<view class="cate-lv2" v-for="(item2, i2) in cateList2" :key="i2">
					<!-- 二级分类的标题 -->
					<view class="cate-lv2-title">/ {{item2.cat_name}} /</view>
					<!-- 当前二级分类下的三级分类 -->
					<view class="cate-lv3-list">
						<!-- 三级分类的Item项 -->
						<view class="cate-lv3-item" v-for="(item3, i3) in item2.children" :key="i3">
							<!-- 三级分类的图片 -->
							<image :src="item3.cat_icon"></image>
							<!-- 三级分类的文本 -->
							<text>{{item3.cat_name}}</text>
						</view>
					</view>
				</view>
			</scroll-view>

美化样式

	.cate-lv3-list {
		display: flex;
		flex-wrap: wrap;
		
		.cate-lv3-item {
			width: 33.33%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-bottom: 10px;
			
			image {
				width: 60px;
				height: 60px;
			}
			text {
				font-size: 12px;
			}
		}
	}

在这里插入图片描述
在这里插入图片描述

六、切换页面重置滚动条位置

在这里插入图片描述
先将右侧页面向下滚动
在这里插入图片描述
切换页面时，重新回到顶部

在这里插入图片描述

七、点击三级分类跳转到商品列表页面

在这里插入图片描述

点击商品后，有参数返回页面跳转
在这里插入图片描述

Kiritoasu
关注
  • 22
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
商品分类-列表页
weixin_45116848的博客
09-19 4967
商品分类-列表页 页面展示 1、分析页面结构 2、后台代码实现 这个后台返回前台要是一个集合,所以用用到json 2.1、添加 ego-common 项目 pom.xml 的 json 依赖 <!-- Jackson Json 处理工具包 --> <dependency> <groupId>com.fasterxml.jackson.core&l...
红色的母婴商城小程序模板.zip
05-31
一款红色多功能的综合类商城小程序前端模板下载。包含首页、商品分类、商品列表、商品详情、购物车、个人中心、全部订单等页面。 可用于母婴、生活用品、服装配饰等微信商城小程序模板。
【微信小程序】一文读懂页面导航_微信小程序分类导航(1)
2401_84182073的博客
04-17 491
在实际开发中，这种场景也是非常多见了，一个比较复杂的小程序都会有比较多的页面，而这么多页面又不会都在。是啥不，底部的导航栏，点击后可以跳转到相对应的页面，而用。中配置，所有这么页面的跳转就得靠这个方法来实现啦。设置回退的层级，如果不设置，那么默认值将会为1。下面的几个方法来实现，接下来我们来一一讲解。你还可以在里面嵌套其他组件，比如嵌套一个。文件夹已经定义的页面，但是没有在。属性，在效果上就类似浏览器的。属性了，需要更改的是，设置。我们需要设置两个属性在。的写法不变，有变化的是。与上文一样，也是需要。
【微信小程序】一文读懂页面导航_微信小程序分类导航(2)
最新发布
2401_84182020的博客
04-30 405
还记得我们之前学到的tarBar是啥不，底部的导航栏，点击后可以跳转到相对应的页面，而用也可以实现。我们需要设置两个属性在navigator组件中，url和open-type。urlopen-typenavigatorswitchTabtarBartarBarapp.jsontarBar你还可以在里面嵌套其他组件，比如嵌套一个button。
小程序分类页面的实现
gua551100gua的博客
11-07 3399
然后跳转到分类页面的时候，分类页面通过拿到category.id，就能在分类页面知道 在金刚区选中的分类了，从而将该分类进行高亮显示。否则不显示加号，显示购物车图标。点击商品会跳转到详情页面，需要给一个跳转链接，这个商品会有不同的类别，跳转的时候，需要根据类别，做不同的逻辑处理。需要通过一个字段进行显示，而原有数据中没有这样的字段，所以需要手动给当前的数据添加这样的字段，即需要修改原数据的。选择之后，再添加到购物车。外面一个循环，里面再套一个循环，因为内外层的id是一样的，所以可以为第二层的id起个别名。
微信小程序开发--分类页面实现
Aurora_1970s的博客
10-24 8052
微信小程序开发–分类页面实现 之前在详情页面利用Vant Weapp的UI库构建出了GoodsAction 商品导航功能，接着需要在分类页面(kind.wxml)实现商品分类。 1.引入第三方组件 用到的是Tab标签页 在kind.json中写入： "usingComponents": { "van-tab": "/miniprogram_npm/@vant/weapp/tab/index", "van-tabs": "/miniprogram_npm/@vant/weapp/tabs/index"
微信小程序实战篇-分类页面制作
weixin_43699616的博客
11-28 4646
转载自：https://blog.csdn.net/u012927188/article/details/7365026 哈喽，大家好，又到周五啦，今天代码君要教大家分类页面的制作，废话不多说，先上效果图 这个界面布局难度不是很大，css基础好的，很快就实现了，分类界面，左边是一级目录，右边是一级目录对应的二级目录，根据这个需求，我们数据设计的结构一定是数组嵌套数组，第一个数组包含一级目录数据，...
小程序分类页面
xiaoququ的博客
08-10 4833
样式（二级分类） html 结构说明：list 列表分为 left 和 right 两块 <view class="category"> <view class="search"> <input type="text" name="search" bindconfirm='shop_search_function' confirm-type=...
快速掌握微信小程序 tab 切换的实现技巧（可滑动切换）
热门推荐
Shids_的博客
05-09 1万+
快速掌握微信小程序 tab 切换的实现技巧（可滑动切换）
小程序学习笔记6--小程序列表页面
君莫笑
02-08 1047
页面事件一、监听用户下拉动作 一、监听用户下拉动作 在页面js文件中，通过onPullDownRefresh()函数可以监听页面下拉刷新事件。启用下拉刷新开始的方式有 2 种： 全局开启下拉刷新：在app.json的window节点中，将enablePullDownRefresh设置为true 局部开启下拉刷新：在页面的.json文件中，将enablePullDownRefresh设置为true（推荐） ps：当处理完下拉刷新后，下拉刷新的loading效果会一直显示，不会主消失，所以需要手动隐藏loa
学生大作业 宠物商城 小程序js.zip
09-16
宠物商城 首页，分类，购物车，我的，四个页面
小程序实现分类页
10-16
主要为大家详细介绍了小程序实现好看的分类页，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序商城项目之淘宝分类入口（2）
12-29
分类入口，已经成为了商城项目必须的布局之一，这里以仿照淘宝的分类入口来做案例 下图红框部分，就是本文重点讲解部分，另外本文并没有写点击某个入口跳转页面。 如需学习页面跳转的同学，可以参考此文 微信小程序的页面跳转和参数传递 —— 微信小程序教程系列（6） 页面分析： 使用for循环遍历所有项，插入页面，页面中的项使用左浮动，并使用百分比布局，设置20%的宽度每一项。 这样满5个item后，自动排在下一行 wxml： <view class=menu-wrp> <!--设定一个item项后，遍历输出--> <view class=menu-list wx:for={{men
微信小程序商品展示界面源码demo
10-26
当初自己根据微信小程序开发文档写的一个demo,商品分类展示功能。
小程序分类页面（左右滑动互不影响）
07-17
小程序分类页面（仿京东，左走滑动互不影响）希望多多支持
小米商城微信小程序源码实现
03-11
为区分小米商城官方小程序，该项目我命名为小小米。该项目与小米官方没有关系，纯属个人瞎搞，若需要购买小米产品请到小米官方商城。 项目包含4个tabBar：首页、发现页（即商品展示页）、购物车、我的。另有商品...
ssm项目基于uniapp智能小程序商城.zip
04-10
SSM项目基于uniapp智能小程序商城.zip是一个使用Vue.js语言开发的跨平台电商应用，它采用了SSM（Spring Spring MVC MyBatis）作为后端框架，并结合了uniapp前端技术。该系统旨在为商家和消费者提供一个全面的电子...
【微信小程序】一文读懂页面导航
weixin_62542181的博客
08-10 4041
本文讲解了微信小程序中页面导航，包括页面导航中的声明式导航和编程式导航，以及导航传参，内附示范
商城小程序分类实现csnd
11-22
商城小程序的分类实现一般可以借助于CSND（Category, Subcategory, and Nested Category）的方法。CSND的核心理念是通过建立层次化的商品分类结构，使得用户能够更方便地浏览和找到所需商品。 首先，商城管理员可以在小程序后台创建一级分类，如服饰、食品、家居等，并为每个一级分类设定一个唯一的标识码。随后，管理员可以在每个一级分类下创建二级分类，如男装、女装、童装等，二级分类同样需要设定唯一标识码。如果需要，还可以在二级分类下再创建三级分类，如上衣、裤子等。这样就形成了层次化的商品分类结构。 在小程序的前端界面上，用户可以通过点击一级分类跳转到对应的一级分类的商品列表页面，同时也可以在一级分类页面上查看该分类下的二级分类。点击二级分类则跳转到对应的二级分类商品列表页面，同样也可以在二级分类页面上查看该分类下的三级分类。这样不仅可以方便用户快速找到自己感兴趣的商品，也能让用户获得更全面的商品信息。 为了提供更好的用户体验，商城小程序还可以利用搜索功能来辅助分类实现。用户可以在分类页面中使用搜索框输入关键字，小程序将根据关键字在当前分类或者整个商城中搜索匹配的商品，并返回结果给用户。 通过以上的CSND分类实现，商城小程序能够更好地组织和展示商品信息，提高用户的浏览效率和购物体验。同时，商城管理员也能更灵活地管理和更新商品分类，以适应市场和用户需求的变化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值