uni-app 商城分类功能左侧点击实现联动

实现逻辑：结合uni-app 中的 scroll-view 组件 和 scroll-view 提供的两个参数（scroll-into-view、scroll-with-animation）

// 左侧 定义了点击事件 @click="menuTab(index)，控制了点击样式 :class="{cateActive:index == current}"
<scroll-view class="cartNameLeft" scroll-y="true">
		<view class="cartNameItem" :class="{cateActive:index == current}" v-for="(item,index) in cate" :key='index' @click="menuTab(index)"> 
		{
    
    {
    
    item.catename}}
		<view class="cateLine"></view>
	</view>
</scroll-view>

scroll-into-view 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素

// 右侧 滚动元素设置id id不能数字开头，scroll-view 滚动标签设置为'cate'+current ，设置为'cate'+current是为了和左侧点击事件关联，因为左侧根据 current 改变样式
<scroll-view  scroll-y="true" :scroll-into-view = "'cate'+current" scroll-with-animation="true">
	<view class="cateTtem" v-for="(item,index) in cate" :key="index" :id="'cate'+index">
		- 导航 -
	</view>
</scroll-view>	

export default {
    
    
	data() {
    
    
		return {
    
    
			cate:[],
			current:0
		}
	},
	onLoad() {
    
    
		this.getData()
	},
	methods: {
    
    
		getData() {
    
    
			uni.request({
    
    
			    url: '/api/index/cate',
			    success: (res) => {
    
    
					this.cate = res.data.data;
			        console.log(res.data.data);
			    }
			});
		},
		menuTab(index) {
    
    
			this.current = index
		}
	}
}