uniapp实现原生商品分类（小程序的思路也一样）_uniapp实现商品分类

uniapp实现原生商品分类

实现后的效果：

需求分析：一个典型的商品分类，点击左侧导航，实现右侧分类动态跳转功能，并编译到小程序。（最基础的移动端商品分类）

来认识一个原生组件：scroll-view

官方定义：可滚动视图区域。用于区域滚动。

主要用到这三个关键属性

搭建结构

<view class="goods_list">
	<view class="class" @click="click">
		<view class="item" data-id="uid1">分类1</view>
		<view class="item" data-id="uid2">分类2</view>
		<view class="item" data-id="uid3">分类3</view>
	</view>

	<scroll-view class="lists" :scroll-y="true" :scroll-with-animation="true" :scroll-into-view="current">
		<view id="uid1">
			<view class="title">分类1</view>
			<view v-for="(item,index) in 10" :key="index">分类1的：当前值{{item}}</view>
		</view>
		<view id="uid2">
			<view class="title">分类2</view>
			<view v-for="(item,index) in 10" :key="index">分类2的：当前值{{item}}</view>
		</view>
		<view id="uid3">
			<view class="title">分类3</view>
			<view v-for="(item,index) in 10" :key="index">分类3的：当前值{{item}}</view>
		</view>
	</scroll-view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

解读代码：

总体构用good_list包裹，其中，左侧区域使用class来定义了分类部分，lists（scroll-view）定义了右侧商品列表
在class标签上使用data-自定义数据，为切换的id值
在lists里面 模拟定义三个分类详情 以id为分类（id不可以数字开头）
在ID分类里模拟了几条数据

_

实现思路：

当点击时（我使用了事件委托），我拿到这个里面的事件对象，拿到自定义的值，重新赋值给data上的current变量，我在scroll-view标签上绑定了scroll-into-view这个属性，值就是，然后lists里面的子元素id与分类一一对应。

最后附上完整代码

<template>
	<view class="goods_list">
		<view class="class" @click="click">
			<view class="item" data-id="uid1">分类1</view>
			<view class="item" data-id="uid2">分类2</view>
			<view class="item" data-id="uid3">分类3</view>
		</view>
		<scroll-view class="lists" :scroll-y="true" :scroll-with-animation="true" :scroll-into-view="current">
			<view id="uid1">
				<view class="title">分类1</view>
				<view v-for="(item,index) in 10" :key="index">分类1的：当前值{{item}}</view>
			</view>
			<view id="uid2">
				<view class="title">分类2</view>
				<view v-for="(item,index) in 10" :key="index">分类2的：当前值{{item}}</view>
			</view>
			<view id="uid3">
				<view class="title">分类3</view>
				<view v-for="(item,index) in 10" :key="index">分类3的：当前值{{item}}</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current:"uid3"
			}
		},
		onLoad() {

		},
		methods: {
			click(e){
				this.current = e.target.dataset.id;
			}
		}
	}
</script>

<style>
	.goods_list{
		background-color: #FFFFFF;
		display: flex;
	}
	.goods_list .class{
		width: 20%;
		background-color: red;
	}
	.goods_list .class view{
		padding:10px;
		border:1px solid #ccc;
	}
	.goods_list .lists{
		width: 80%;
		height: 400px;
		background-color: #99fff9;
	}
	.goods_list .lists .title{
		font-size: 30px;
	}
</style>

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65