【备战春招】第14天 分类页分类菜单组件开发一

课程名称： CRMEB uniapp电商项目二次开发实战

课程章节： 4-3----4.6分类菜单组件开发
课程讲师： CRMEB

课程内容：
1、右侧详情页面的布局,使用scroll-view实现滚动布局

<template>
	<view class="category-area">
		<view class="category-area-container">
			<scroll-view class="first-category" :scroll-y="true">
				<view class="list">
					<view class="item" v-for="(item,index) in list" :key="item.id" :class="{on:index === curFirstCateIdx}" @click="onSwitchFirstCate(item,index)">
						{{item.cate_name}}
					</view>
				</view>
			</scroll-view>
			<scroll-view class="second-category" :scroll-y="true" :scroll-into-view="`curView-${curSecondCateRowIdx}`" @scroll="onSecondCateViewScroll">
				<view class="first-list">
					<view class="first-item" v-for="(cate1,idx1) in list" :key="cate1.id" :id="`curView-${idx}`">
						<view class="first-category-name">
							{{cate1.cate_name}}
						</view>
						<view class="second-list">
							<view class="second-item" v-for="cate2 in cate1.children" :key="cate2.id">
								<image :class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="cate2.pic" mode=""></image>
								<view class="second-category-name">
									{{cate2.cate_name}}
								</view>
							</view>
						</view>
					</view>
					<view class="supplement" :style="{height:`${supplement}`}px">
						
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.category-area {
		&-container {
			--view-h:calc(100vh-54px);
			.first-category {
				width: 24%;
				height: var(--view-h);
				background-color: #f7f7f7;
				overflow-x: hidden;
				 .list{
					 .item{
						 display: flex;
						 justify-content: center;
						 align-items: center;
						 height: 100rpx;
						 width: 100%;
						 font-size: 26rpx;
						 color: #424242;
						 &.on{
							 color: #fc4141;
							 font-weight: 700;
						 }
					 }
				 }
			}
				
			.second-category{
				width: 76%;
				height: var(--view-h);
				overflow-x: hidden;
				.first-list{
					.first-item{
						padding-top: 20rpx;
							
						.first-category-name{
							text-align: center;
							font-size: 28rpx;
							color: #333;
							margin: 0 30rpx;
							font-weight: 700;
							height: 90rpx;
							line-height: 90rpx;
							font-weight: 700;
						}
						.second-list{
							display: flex;
							flex-wrap: wrap;
							justify-content: space-between;
							.second-item{
								display: flex;
								flex-direction: column;
								align-items: center;
								width: 176rpx;
								margin-top: 26rpx;
								image{
									width: 120rpx;
									height: 120rpx;
									border-radius:50%;
								}
								.second-category-name{
									width: 120rpx;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
									font-size: 24rpx;
									color: #333;
									height: 56rpx;
									line-height: 56rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>

2、左侧计算实现滚动距离位置关系，对底部空白进行补充

data() {
			return {
				curFirstCateIdx:0,
				supplement:0,
				curSecondCateRowIdx:0,
				cateArea:[]
			}
		},
		watch:{
			list:{
				immediate:true,
				handler(nVal,oVal){
					if(nVal){
						this.computeSupplement()
					}
				}
			}
		}
		methods:{
			onSwitchFirstCate(cate,idx){
				this.curFirstCateIdx = idx;
				this.curSecondCateRowIdx = idx
				
			},
			
			computeSupplement(){
				const query = uni.createSelectorQuery().in(this);
				query.select('.first-item').boundingClientRect(data => {
				  let screenH = 0
				  let cateArea = []
				  uni.getSystemInfo({
				  	success({windowHeight}) {
				  		screenH = windowHeight
				  	}
				  })
				  data.forEach((item) =>{
					  screenH -= item.height
					  cateArea.push({starY:item.top-54,endY:item.top+item.height-54})
				  })
				  this.cateArea = cateArea
				  screenH +=data.pop().top
				  screenH-=100
				  this.supplement = screenH
				}).exec();
			}
		}

3、根据左侧滚动计算联动的实现

data() {
			return {
				curFirstCateIdx:0,
				supplement:0,
				curSecondCateRowIdx:0,
				cateArea:[]
			}
		},
		watch:{
			list:{
				immediate:true,
				handler(nVal,oVal){
					if(nVal){
						this.computeSupplement()
					}
				}
			}
		}
		methods:{
			onSwitchFirstCate(cate,idx){
				this.curFirstCateIdx = idx;
				this.curSecondCateRowIdx = idx
				
			},
			onSecondCateViewScroll({detial:{scrollTop}}){
					
				for(let i=0;i<=this.cateArea.length;i++){
					const curCateArea  = this.cateArea[i]
					if(scrollTop>=curCateArea.starY && scrollTop<curCateArea.endY-20){
						this.curFirstCateIdx = i
						break
					}
				}
			},
			computeSupplement(){
				const query = uni.createSelectorQuery().in(this);
				query.select('.first-item').boundingClientRect(data => {
				  let screenH = 0
				  let cateArea = []
				  uni.getSystemInfo({
				  	success({windowHeight}) {
				  		screenH = windowHeight
				  	}
				  })
				  data.forEach((item) =>{
					  screenH -= item.height
					  cateArea.push({starY:item.top-54,endY:item.top+item.height-54})
				  })
				  this.cateArea = cateArea
				  screenH +=data.pop().top
				  screenH-=100
				  this.supplement = screenH
				}).exec();
			}
		}

课程收获：
这节课学到了如何在css中自定义变量并且使用，通过–view-h:calc(100vh-54px);的方式生命变量，再通过height: var(–view-h);的方式对变量进行调用，再有学习到了scroll-view属性可以可滚动视图区域。用于区域滚动。其中属性有（scroll-top：设置竖向滚动条位置 scroll-into-view： 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素，scroll-with-animation：在设置滚动条位置时使用动画过渡；@scroll： 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}）等，再有学习到了如何实现两个直接的联动效果等