Live shopping mall source code, realize left-right linkage of commodity classification pages

Live mall source code , Realize the left-right linkage commodity classification page
One 、 Build structure
a key ： Use uniapp Of scroll-view Components , If it is a small program, the native development is also this component ; Second, if it's html Development , Just implement an overflow scroll .

I don't say much nonsense , Code up ：

<template>
	<view class="u-wrap">
		<view class="u-menu-wrap">
			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
			 :scroll-into-view="itemId">
				<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item" :class="[current == index ? 'u-tab-item-active' : '']"
				 @tap.stop="swichMenu(index)">
					<text class="u-line-1">{
    {
    item.name}}</text>
				</view>
			</scroll-view>
			<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box" @scroll="rightScroll">
				<view class="page-view">
					<view class="class-item" :id="'item' + index" v-for="(item , index) in tabbar" :key="index">
						<view class="item-title">
							<text>{
    {
    item.name}}</text>
						</view>
						<view class="item-container">
							<view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1" @click="featureC(item1.cat, item1.name)">
								<image v-if="item1.icon != ''" class="item-menu-image" :src="item1.icon" mode=""></image>
								<view v-else class="item-menu-image row-c" style="background-color: #F4F6F8;"><text style="font-size: 20rpx;color: #d0d0d0;"> Loading failed </text></view>
								<view class="item-menu-name">{
    {
    item1.name}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

JavaScript Business logic code ：

data() {
    
	return {
    
		scrollTop: 0, //tab The scroll bar position of the title 
		oldScrollTop: 0, // tab The old position of the scroll bar of the title 
		current: 0, //  Default the value of the current item 
		menuHeight: 0, //  The height of the menu on the left 
		menuItemHeight: 0, //  Left menu item Height 
		itemId: '', //  On the right side of the column scroll-view For scrolling id
		tabbar: JSON.parse(uni.getStorageSync('categroy')), //  Rendered data , Put it at the end for you to test 
		arr: [], //  Store an array of heights from the top 
		scrollRightTop: 0, //  The right column scroll-view Scroll bar height 
		timer: null //  Timer 
	}
}

Two 、 Add logical layer business
Get the height of each category on the left and right respectively
We know , stay uniapp There's no window Objects and dom Elements , So if we want to get some node information on the page , Need to pass through uni.createSelectorQuery() This API To get , No more details here .—— 《 Delivery address 》

/** *  Get the height of a target element  * @elClass  The class name of the element  * @dataVal  Store height objects  */
methods: {
    
    getElRect(elClass, dataVal) {
    
		new Promise((resolve, reject) => {
    
			const query = uni.createSelectorQuery().in(this);
			query.select('.' + elClass).fields({
    
				size: true
			}, res => {
    
				//  If the node has not been generated ,res The value is null, Loop call execution 
				if (!res) {
    
					setTimeout(() => {
    
						this.getElRect(elClass);
					}, 10);
					return;
				}
				this[dataVal] = res.height;
				resolve();
			}).exec();
		})
	}
}

Calculate the height of each category on the right from the top and save

onReady() {
    
	this.getMenuItemTop()
},
mehods: {
    
    /** *  Get each menu on the right item The distance to the top  *  Store in  arr  The array is used for later scrolling judgment  */
	getMenuItemTop() {
    
		new Promise(resolve => {
    
			let selectorQuery = uni.createSelectorQuery();
			selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
    
				//  If the node has not been generated ,rects The value is []( Because with selectAll, So the return is an array ), Loop call execution 
				if(!rects.length) {
    
					setTimeout(() => {
    
						this.getMenuItemTop();
					}, 10);
					return ;
				}
				rects.forEach((rect) => {
    
					//  As the case may be , Subtract... Here rects[0].top, Because the top of the first item may not be attached to the navigation bar ( For example, there is a search box )
					// this.arr.push(rect.top - rects[0].top);
					this.arr.push(rect.top)
					resolve();
				})
			}).exec()
		})
	},
}

The above is the source code of the live broadcast Mall , Realize the left-right linkage commodity classification page , More content welcome to follow the article