仿饿了么商铺分类商品联动组件

组件

新建文件 zh-sliding-menu -> zh-sliding-menu.vue

<template>
	<view class="content" :style="{'height': `${scrollH}px`}">
		<view class="cont">
			<scroll-view v-if="sidebarShow" scroll-y scroll-with-animation class="cont_view menu-scroll-view" :scroll-top="scrollTop"
				:scroll-into-view="itemId" :style="[menuLeft]">
				<view v-for="(item,index) in tabbar" :key="index" class="menu_item"
					:style="[menuLeftActive,current == index?menuLeftActivea:{}]" @tap.stop="swichMenu(index)">
					<view class="menu_item_name" :style="[current == index && isTeg ? {'color':tegColor} :{}]">
						{
  {item[keyName]}}</view>
					<view class="y_teg" :style="[{'background':tegColor}]" v-if="current == index && isTeg"></view>
				</view>
			</scroll-view>
			<scroll-view :scroll-top="scrollRightTop" :scroll-y="scrollShowY" scroll-with-animation :style="[menuRight]"
				@scroll="rightScroll">
				<view class="menu_right_view">
					<view class="menu_right_item" :id="'item' + index" v-for="(item , index) in tabbar" :key="index">
						<view class="menu_right_title" v-if="item[keyName]">{
  {item[keyName]}}</view>
						<view class="">
							<slot :scroll_list='item[tabbarName]'></slot>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	/*
	 * zhSlidingMenu 分类商品-单向联动 + 双向联动，支持自定义商品内容
	 * @property {Array} tabbar 分类数据
	 * @property {String} keyName 从tabbar元素对象中读取的键名
	 * @property {Number} scrollH scroll高度
	 * @property {Object} menuLeft 左侧样式
	 * @property {Object} menuLeftActive 左侧未选中样式
	 * @property {Object} menuLeftActivea 左侧选中样式
	 * @property {Object} menuRight 右侧样式
	 * @property {Object} tabbarName tabbar数组中指定对象的目标属性名
	 * @property {Boolean} isTeg 左侧竖条标记
	 * @property {String} tegColor 左侧竖条标记颜色
	 * @property {Boolean} scrollY 右侧滚动到顶部开启Y轴scroll
	 * @property {Boolean} sidebarShow 是否开启侧边栏
	 * 
	 */
	export default {
     
		props: {
     
			sidebarShow:{
     
				typeof: Boolean,
				default: () => true
			},
			tabbar: {
     
				typeof: Array,
				default: () => []
			},
			keyName: {
     
				typeof: String,
				default: () => 'name'
			},
			scrollH: {
     
				typeof: Number,
				default: () => 500
			},
			menuLeft: {
     
				typeof: Object,
				default: () => ({
     
					'width': '200rpx',
					'background': '#F5F5F5',
				})
			},
			menuLeftActive: {
     
				typeof: Object,
				default: () => ({
     
					'color': '#333333',
					'font-weight': '400',
					'font-size': '30rpx',
				})
			},
			menuLeftActivea: {
     
				typeof: Object,
				default: () => ({
     
					'color': '#f82e20',
					'font-weight': '500',
					'background': '#fff',
				})
			},
			menuRight: {
     
				typeof: Object,
				default: () => ({
     
					background: '#fff',
				})
			},
			tabbarName: {
     
				typeof: String,
				default: () => 'children'
			},
			isTeg: {
     
				typeof: Boolean,
				default: () => true
			},
			tegColor: {
     
				typeof: String,
				default: () => '#f82e20'
			},
			scrollY: {
     
				typeof: Boolean,
				default: () => false
			}
		},
		data() {
     
			return {
     
				scrollTop: 0, //tab标题的滚动条位置
				oldScrollTop: 0,
				current: 0, // 预设当前项的值
				menuHeight: 0, // 左边菜单的高度