左联右动==dome

<template>
	<view>
		<view class="serch">
			<button @click="serchBtn" type="default">搜索</button>
		</view>
		<!-- 分类 -->
		<view class="list">
			<scroll-view scroll-y="true" class="left">
				<view @click="tabBtN(index,item.cat_id)" v-for="(item,index) in typeList"
					:class="cur===index?'active' : ''" :key="item.cat_id">
					<text>{{item.cat_name}}</text>
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="right" :scroll-into-view="id">
				<view v-for="(item,index) in typeList" :key="item.cat_id" :id="'goods_0'+item.cat_id">
					<view class="item-list" v-for="(ite,index) in item.children" :key="ite.cat_id">
						<view class="title">/{{ite.cat_name}}/</view>
						<view @click="listBtn(it.cat_id)" class="right-item" v-for="it in ite.children"
							:key="it.cat_id">
							<image class="image" :src="it.cat_icon" mode="widthFix"></image>
							<view class="text-name">{{it.cat_name}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		gettypedata
	} from "../../utils/api"
	export default {
		data() {
			return {
				typeList: [], //分类的数据
				cur: 0, //索引
				id: 'goods_0'
			};
		},
		onLoad(options) {
			this.getdata();
		},
		methods: {
			// 分类的请求函数
			getdata() {
				gettypedata().then(res => {
					console.log(res);
					this.typeList = res.message
				})
			},
			// 左侧样式tab
			tabBtN(i, id) {
				this.cur = i
				this.id = 'goods_0' + id
			},
			// 跳转搜索页
			serchBtn() {
				uni.navigateTo({
					url: '../serch/serch'
				})
			},
			listBtn(id) {
				uni.navigateTo({
					url: '../pages/goods_list?cid=' + id
				})
			},
		},
	}
</script>