vue中如何实现窗口可视区域上下滚动，并切换商品展示

前提

在vue+uniapp开发中使用scroll-view标签，来实现区域滚动

纵向或横向滚动

1.设置scroll-view标签中的属性scroll-y设定为true开启纵向滚动，scroll-x设定为true开启横向滚动；
2.给scroll-view设置一个高度或者宽度，当内容高度或者宽度大于scroll-view高度时即可开启滚动功能
（内容高度小于scroll-view高度时无法体现滚动功能）；
3.使用组件uni.getSystemInfoSync()动态获取窗口可用高度，让页面中的左右两块滚动区域的高度撑满屏幕
4.从系统信息中获取窗口可用高度并赋值给scroll-view设置的高度，并减去上下导航栏的高度

案例展示：

如何实现点击左侧切换右侧界面，实现逻辑

1.左侧点击高亮效果，在data中定义一个属性selectedIndex，当做左侧遍历数组的下标，默认值为0，也就是默认数组第一个；
2.给左侧元素注册点击事件，将点击是的下标赋值给selectedIndex；
3.通过v-bind:class类名样式增强，来添加点击的样式，当selectedIndex=== index时，显示点击后的样式；
4.右侧数组显示列表的下标等于左侧点击时数组的下标就可以实现啦！

具体看以下代码：

<template>
	<view>
			<my-search holderwords="搜索你想要的商品" bgcolor="#f4f4f4"></my-search>
			<view class="scroll-content">
				<scroll-view class="left" scroll-y :style="{ height: wh + 'px' }">
					<view 
					class="left-item" 
					v-for="(item,index) in list"
					:key="index"
					:class="{active:selectedIndex === index}"
					@click="selectedCate(index)"
					>{{item}}</view>
				</scroll-view>
				<scroll-view class="right" scroll-y :style="{ height: wh + 'px' }">
					<view class="right-item">{{list2[selectedIndex]}}</view>
				</scroll-view>
			</view>
	</view>
</template>

<script>
	import mySearch from '@/components/my-search.vue'
	export default{
		components:{
			mySearch
		},
		data(){
			return{
				selectedIndex:0,
				list:[1,2,3,4,5,6,7,8,9,10],
				list2:['列表1','列表2','列表3','列表4','列表5','列表6','列表7','列表8','列表9','列表10'],
			}
		},
		created(){
			// 动态获取窗口可用高度，以便让页面中的左右两块滚动区域的高度撑满屏幕
			// 1. 获取当前系统信息
			const sysInfo = uni.getSystemInfoSync();
			// 2. 从系统信息中获取窗口可用高度并赋值给 wh
			// 窗口的可用高度 = 屏幕高度 - navigationBar高度 - tabBar高度
			this.wh = sysInfo.windowHeight-72;
		},
		methods:{
			selectedCate(index){
				this.selectedIndex = index
			},
		}
		
	}
</script>
<style scoped lang="scss">
	.scroll-content{
		display: flex;
		color:#444;
		font-size: 26rpx;
		.left{
			width: 240rpx;
			.left-item{
				line-height: 120rpx;
				background-color: #f4f4f4;
				text-align: center;
				&.active{
					background-color: #fff;
					font-size:28rpx;
					color:red;
					position: relative;
					&::before{
						content:"";
						display: block;
						width: 60rpx;
						height:4rpx;
						background-color: red;
						position: absolute;
						bottom:0;
						left:50%;
						transform: translate(-50%);
					}
				}
			}
			}
		.right{
			text-align: center;
		}	
	}
</style>