微信小程序开发学习笔记《20》uni-app框架-分类导航区域与楼层区域_使用uniapp写微信小程序如何在商品列表页实现单楼层效果

微信小程序开发学习笔记《20》uni-app框架-分类导航区域与楼层区域

博主正在学习微信小程序开发，希望记录自己学习过程同时与广大网友共同学习讨论。建议仔细阅读uni-app对应官方文档

一、分类导航区域

1.1 获取分类导航的数据

实现思路:

1. 定义data数据
2. 在onLoad中调用获取数据的方法
3. 在methods中定义获取数据的方法

<script>
	export default {
		data() {
			return {
				// 1. 分类导航区的数据列表
				navList: [],
			}
		},
		onLoad() { // 声明生命周期函数
			// 2．在小程序页面刚加载的时候，调用获取数据的方法
			this.getNavList()
		},
		methods: {
			// 获取分类导航区域数据的方法
			async getNavList() {
				// 3.1发起请求
				const {
					data: res
				} = await uni.$http.get('/api/public/v1/home/catitems') //这个get封装过了，需要设置一个根路径，（这括号里面的路径都是会和根路径进行拼接的）
				console.log(res)
			
				// 3.2 请求失败
				if (res.meta.status !== 200) return uni.$showMsg()
			
				// 3.3请求成功,为data中的数据赋值
				this.navList = res.message
			},
		},
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

1.2 渲染分类导航的UI结构

1. 定义如下的uI结构：

<!--分类导航区域-->
<view class="nav-list"> 
	<view class="nav-item" v-for="(item,i) in navList" :key="i">
		<image :src="item.image_src" class="nav-img"></image>
	</view>
</view>
1
2
3
4
5
6

2. 通过如下的样式美化页面结构：

.nav-list {
	display: flex;
	justify-content: space-around;
	margin: 15px 0;

	.nav-img {
		width: 128rpx;
		height: 140rpx;
	}
}
1
2
3
4
5
6
7
8
9
10

最终效果如下：

二、分类点击跳转页面

1. 添加点击事件处理函数，并传参

<view class="nav-list"> 
	<!-- @click="navClickHandler(item)添加的点击事件处理函数 -->
	<view class="nav-item" v-for="(item,i) in navList" :key="i" @click="navClickHandler(item)">
		<image :src="item.image_src" class="nav-img"></image>
	</view>
</view>
1
2
3
4
5
6

2. 定义点击事件处理函数，根据不同的点击参数跳转对应的页面

// 分类导航跳转的方法
navClickHandler(item) {
	// 根据item中的name是什么，进行跳转到对应页面
	if (item.name === '分类') {      //由于分类页面为导航栏页面，所以使用uni.switchTab
		uni.switchTab({
			url:'/pages/cate/cate'
		})
	}
},
1
2
3
4
5
6
7
8
9

三、楼层区域

3.1 获取楼层数据
实现思路:

1. 定义data数据
2. 在onLoad中调用获取数据的方法
3. 在methods中定义获取数据的方法

<script>
	export default {
		data() {
			return {
				// 3.定义楼层区域的数据列表
				floorList: [],
			}
		},
		
		onLoad() { // 声明生命周期函数
			// 在小程序页面刚加载的时候，调用获取数据的方法
			this.getFloorList()
		},
		
		methods: {
		
			// 获取楼层区域数据的方法
			async getFloorList() {

				// 3.1发起请求
				const {
					data: res
				} = await uni.$http.get('/api/public/v1/home/floordata')
				console.log(res)

				// 3.2 请求失败
				if (res.meta.status !== 200) return uni.$showMsg()

				// 3.3请求成功,为data中的数据赋值
				this.floorList = res.message
			},
		},
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

发现了吗，获取数据的套路都是一样的，先定义数据，然后发请求。

四、渲染楼层的标题

1. 定义如下的UI结构:

<!--楼层区域-->
<view class="floor-list">
	<view class="floor-item" v-for="(item,i) in floorList" :key="i">
		<image :src="item.floor_title.image_src" class="floor-title"></image>
	</view>
</view>
1
2
3
4
5
6

2. 美化楼层标题UI结构

// 楼层标题样式
.floor-title{
	display: flex;
	width: 100%;
	height: 60rpx;
}
1
2
3
4
5
6

有没有发现循环渲染也就是套路罢了，都可以一样。

五、渲染楼层里的图片

1. 定义楼层图片区域的UI结构:

<!-- 楼层的具体图片区域 -->
<view class="floor-item-box"> <!-- 楼层图片容器 -->

	<!-- 楼层左大图区域 -->
	<view class="left-img-box">
		<image :src="item.product_list[0].image_src"
			:style="{width:item.product_list[0].image_width + 'rpx'}" mode="widthFix" />
		</image>
		<!-- :style="{width:item.product_list[0].image_width + 'rpx'}" 动态绑定样式  mode="widthFix" 宽度自适应-->
	</view>

	<!-- 楼层右4小图区域 -->
	<view class="right-img-box">
		<view class="right-img-item" v-for="(item2,i2) in item.product_list" :key="i2" v-if="i2 != 0">
			<image :src="item2.image_src"
				:style="{width:item2.image_width + 'rpx'}" mode="widthFix"/>
			</image>
		</view>
	</view>

</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2. 美化UI结构

// 楼层区域标题样式
.floor-title {
	display: flex;
	width: 100%;
	height: 60rpx;
}
// 楼层区域右图片样式
.right-img-box{
	display: flex;
	flex-wrap: wrap;   // 横向对齐
}
// 楼层区域整体布局样式
.floor-item-box{
	display: flex;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

最终效果如图：

以上学习笔记都是博主在B站学习黑马程序员课程时的学习笔记，如果有什么问题，烦请联系我删除。