基于uniapp，双侧联动界面的实现，常用于新闻类别与新闻的对应，点餐类别与餐品的对应（类别与详情之间的对应）

在本篇文章中，基于《黑马商城》项目，

分析双侧（或多侧）滑动列表的实现，使用场景常常是类别与详情之间的对应

效果如下：

 如上图所示，左侧点击“家居生活”，右侧显示与家居生活相关的内容；左侧点击点击“摄影设计”，右侧显示与摄影设计相关的内容；左侧点击“明星美女”，右侧显示与明星美女相关的内容，

并且在左侧点击相应区域时，相应区域会变红。

 在右侧，点击图片，有放大效果显示。并且可以滑动切换所有的图片

---

 对于页面的框架，HTML部分，代码如下：

<template>
	<view class="pics">
		<scroll-view class="left" scroll-y>
			<view 
			@click="leftClickHandle(index,item.id)"
			:class="active===index?'active':''" 
			v-for="(item,index) in cates" 
			:key="item.id">
			  {
  {item.title}}
			</view>
		</scroll-view>
		<scroll-view class="right" scroll-y>
			<view class="item" v-for="item in secondData" :key="item.id">
				<image @click="previewImg(item.img_url)" :src="item.img_url"></image>
				<text>{
  {item.title}}</text>
			</view>
			<text v-if="secondData.length =&