ec.uniapp-master/pages/index/category/category.vue

<template>
	<view class="centent">
		<lf-nav :title="['分类','品牌'][current]" bgColor="#fff" :search="current == 0" @changeHeight="e => nav_height = e"></lf-nav>
		<view class="tabs">
			<view class="lf-tab" 
				:style="{width: 100 / tabs.length +'%'}"
				:class="{'tab-active': current == index}" 
				v-for="(item, index) in tabs" :key="index"
				@click="current = index">{{ item.name }}
			</view>
		</view>
		<!-- 分类 -->
		<view class="page" v-if="current == 0">
			<scroll-view class="left_view p_r" scroll-y :style="{ height: autoHeight }">
				<block v-for="(item, index) in dataArr" :key="index">
					<view :class="[left_selectIndex == index ? 'left_item_s' : '', 'left_item']" :id="'left_' + index" @click="leftTap({ item, index })">{{ item.name }}</view>
				</block>
				<view class="seletItem" :style="{ top: left_selectIndex * 60 - 19 + 'px' }"></view>
			</scroll-view>
			
			<scroll-view @scroll="rightScroll" class="right_view" scroll-y :style="{ height: autoHeight }" :scroll-into-view="'left_' + right_selectIndex" scroll-with-animation>
				<block v-for="(item, index) in dataArr" :key="index">
					<view :ref="'left_' + index" class="right_item " :id="'left_' + index">
						<text class="right_item_title ">{{ item.name }}</text>
						<view class="right_item_view">
							<view class="item" v-for="(item, index) in item.subArr" :key="index" @click="rightTap(item)">
								<image :src="item.img" :style="{ width: '100%', height: subItemW + 'px', background: '#999999' }"></image>
								<text class="lf-font-24">{{ item.name }}</text>
							</view>
						</view>
					</view>
				</block>
				<view class="" :style="{ height: 'calc('+ scrollH / 2 +'px)' }"><!-- 站位 --></view>
			</scroll-view>
		</view>
		<!-- 品牌 -->
		<view class="brand" v-else-if="current == 1" :style="{height: autoHeight}">
			<!-- 筛选 -->
			<view class="lf-filter-box">
				<view class="lf-filter" :class="{'lf-filter-after': filter_active == ''}">
					<view :class="{'filter-active': filter_active == 'floor'}" @click="filter_active = 'floor'">楼层</view>
					<view :class="{'filter-active': filter_active == 'class'}" @click="filter_active = 'class'">分类</view>
				</view>
				<view class="filter-modal-mask" :style="{height: otherHeight}" v-if="filter_active != ''" @click="filter_active = ''">
					<view class="filter-modal">
						<view class="filter-item" v-for="(item, index) in 6" :key="index">{{ '哈哈'+ item }}</view>
					</view>
				</view>
			</view>
			<!-- 内容 -->
			<scroll-view class="brand-scroll" :scroll-into-view="scrollAnchorId" :scroll-y="true" :style="{height: otherHeight}">
				<view class="lf-flex brand-item" :id="'anchor-'+ index" v-for="(item, index) in point_list" :key="index">
					<image class="img" src="https://picsum.photos/200"></image>
					<view class="info">
						<view class="lf-font-36 lf-font-bold lf-color-black">luckin coffee 瑞幸咖啡 {{ item }}</view>
						<view class="lf-font-24 lf-color-gray">餐饮·美食｜18件在售</view>
						<view class="lf-font-24">
							<text class="lf-iconfont icon--1 lf-font-24"></text>
							<text class="lf-color-gray lf-m-l-10">L2</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- 锚点定位 -->
			<view class="fixed-point" @touchmove="pointTouchmove">
				<view class="point-item" @click="pointClick" :id="'point-'+index" :style="{height: 100 / 26 +'%'}" v-for="(item, index) in point_list" :key="index">{{ item }}</view>
			</view>
		</view>
		<lf-tabbar></lf-tabbar>
	</view>
</template>

<script>
	import lfNav from '@/components/lf-nav/lf-nav.vue';
	import lfTabbar from '@/components/lf-tabbar/lf-tabbar.vue';
	import testdata from './testdata.js';
	let app = getApp();
	
	export default {
		data() {
			return {
				scrollH: 0,
				subItemW: 0,
				left_selectIndex: 0,
				right_selectIndex: 0,
				ttscrollH: 0, //总高度
				placeholderH: 0, //占位高度
				heighArr: [],
				dataArr: testdata,
				current: 1,
				nav_height: 0,
				tabs: [{
					name: '分类'
				},{
					name: '品牌'
				}],
				filter_active: '',
				point_list: [],
				scrollAnchorId: ''
			};
		},
		computed: {
			autoHeight(){
				return `calc(${this.scrollH}px - 50px - ${this.nav_height}px - 90rpx)`;
			},
			otherHeight(){
				return `calc(${this.scrollH}px - 50px - ${this.nav_height}px - 90rpx - 105rpx)`;
			}
		},
		components: {
			lfNav,
			lfTabbar
		},
		onLoad() {
			// https://ext.dcloud.net.cn/plugin?id=5031
			let info = uni.getSystemInfoSync();
			
			let self = this;
			self.scrollH = info.screenHeight;
			self.subItemW = parseInt((info.screenWidth * (2 / 3) - 15 * 2 - 24) / 3);
			setTimeout(function() {
				self.computerH();
			}, 100);
			this.createAtoZ();
		},
		methods: {
			// 生成A-Z的大写字母
			createAtoZ(){
				let point_list = [];
				for(var i=0; i<26; i++){
					point_list.push(String.fromCharCode(65+i));
				}
				this.point_list = point_list;
			},
			pointTouchmove(event){
				console.log(event);
			},
			pointClick(event){
				let index = (event.target.id).replace('point-', '');
				let letter = this.point_list[index];
				this.scrollAnchorId = '';
				this.$msg(letter);
				this.$nextTick(() => {
					this.scrollAnchorId = 'anchor-'+ index;
				})
			},
			leftTap: function(e) {
				this.left_selectIndex = e.index;
				this.right_selectIndex = e.index;
			},
			// 右边点击
			rightTap: function() {
				uni.showModal({
					title: '点击了',
					showCancel: false
				});
			},
			rightScroll: function(e) {
				let scrollH = e.detail.scrollTop + 30;
				let cc = this.ttscrollH - this.scrollH;
		
				let a = 0;
				let findInx = this.heighArr.findIndex(function(itemH, i) {
					a = a + itemH;
					return a > scrollH;
				});
				// if (scrollH >= cc) {
				// 	return;
				// }
				this.left_selectIndex = findInx;
			},
			// 计算高度
			computerH: function() {
				this.ttscrollH = 0;
				for (let item of this.dataArr) {
					let title_lineH = 49; //rpx
					let subNum = item.subArr.length;
					let subImgH = this.subItemW; //rpx
					let subTitleH = 40; //rpx
					let rowSpecH = 8; //rpx
					let rowN = subNum % 3;
					let rowSpecNum = parseInt(subNum / 3) + parseInt(rowN > 0 ? 1 : 0);
					let totalRpx = title_lineH + (subImgH + subTitleH) * rowSpecNum + rowSpecH * (rowSpecNum - 1);
					this.heighArr.push(totalRpx);
					this.ttscrollH = this.ttscrollH + totalRpx;
				}
		
				// this.placeholderH = this.scrollH - this.heighArr[this.heighArr.length - 1];
		
				//以下方法也可以
				// let self=this
				// var selectorQuery = uni.createSelectorQuery()
				// selectorQuery.selectAll('.right_item').boundingClientRect(data => {
				// 	self.heighArr = data.map(item => {
				// 		return {
				// 			top: Math.round(item.top),
				// 			height: Math.round(item.height)
				// 		}
				// 	})
				// }).exec()
				// console.log('ttscrollH',this.$refs.left_0)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		display: grid;
		grid-template-columns: 1fr 2fr;
		grid-template-rows: auto;
		position: absolute;
		left: 0rpx;
		right: 0rpx;
		overflow: hidden;
		box-sizing: border-box;
	}
	.left_view {
		background-color: #f4f8f8;
		position: relative;
		box-sizing: border-box;
		// 蒙版
		.seletItem {
			height: 98px;
			position: absolute;
			top: 0rpx;
			left: 0rpx;
			z-index: 10;
			right: 0rpx;
			// background-color: rgba(255, 255, 255, 0.3);
			transition: top 0.2s linear;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			&::before {
				content: '';
				width: 6rpx;
				height: 60%;
				background-color: #15716E;
				left: 0rpx;
			}
		}
		.left_item {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 60px;
			margin-bottom: 0rpx;
			position: relative;
			font-size: 28rpx;
			box-sizing: border-box;
			color: #555555;
		}
		.left_item_s {
			background-color: #ffffff;
			color: #15716E;
			font-weight: bold;
			position: relative;
			box-sizing: border-box;
		}
	}
	
	.right_view {
		background-color: #ffffff;
		padding: 0rpx 12px;
		box-sizing: border-box;
		.right_item {
			.right_item_title {
				display: block;
				box-sizing: border-box;
				line-height: 49px;
				font-size: 28rpx;
				font-weight: bold;
				color: #15716E;
			}
			.right_item_view {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				grid-template-rows: auto;
				grid-gap: 8px 15px;
				box-sizing: border-box;
				.item {
					display: flex;
					flex-flow: column nowrap;
					align-items: center;
					box-sizing: border-box;
					text {
						color: #333;
						line-height: 40px;
					}
				}
			}
		}
	}
	
	.tabs{
		width: 750rpx;
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #e5e5e5;
		background-color: #FFFFFF;
		.lf-tab{
			// width: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #777777;
			position: relative;
			&.tab-active{
				color: #15716E;
			}
			&.tab-active::after{
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				width: 80rpx;
				height: 10rpx;
				background-color: #15716E;
				border-radius: 10rpx 10rpx 0 0;
				margin-left: -40rpx;
			}
		}
	}
	.lf-filter-box{
		height: 105rpx;
		width: 750rpx;
		background-color: #F4F8F8;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		.lf-filter{
			width: 300rpx;
			height: 65rpx;
			border-radius: 33rpx;
			border: 1rpx solid #15716E;
			color: #15716E;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			overflow: hidden;
			&.lf-filter-after::after{
				content: '';
				position: absolute;
				top: 12rpx;
				left: calc(50% - 1rpx);
				width: 2rpx;
				height: 40rpx;
				background-color: #15716E;
			}
			&>view{
				height: 100%;
				width: 50%;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
			.filter-active{
				background-color: #15716E;
				color: #FFFFFF;
			}
		}
		.filter-modal-mask{
			position: absolute;
			top: 105rpx;
			left: 0;
			width: 100%;
			background-color: rgba(0,0,0,0.5);
			.filter-modal{
				width: 750rpx;
				height: max-content;
				padding: 60rpx 32rpx;
				box-sizing: border-box;
				background-color: #FFFFFF;
				display: flex;
				flex-wrap: wrap;
				.filter-item{
					width: 215rpx;
					height: 65rpx;
					border-radius: 10rpx;
					border: 1rpx solid #555555;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					color: #555555;
					margin-right: 21rpx;
					&:nth-child(3n){
						margin-right: 0rpx;
					}
					&:nth-child(n+4){
						margin-top: 21rpx;
					}
				}
			}
		}
	}
	.brand-scroll{
		padding: 0rpx 32rpx;
		box-sizing: border-box;
		width: 750rpx;
		.brand-item{
			margin-bottom: 60rpx;
			&:nth-child(1n){
				margin-top: 30rpx;
			}
		}
		.img{
			width: 150rpx;
			height: 150rpx;
			border-radius: 4rpx;
			margin-right: 20rpx;
		}
		.info{
			width: 514rpx;
			height: 150rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
	}
	.brand{
		position: relative;
	}
	.fixed-point{
		position: fixed;
		right: 0;
		top: 18vh;
		height: 70vh;
		width: 57rpx;
		background-color: rgba(0,0,0,0.3);
		border-radius: 30rpx 0rpx 0rpx 30rpx;
		padding: 14rpx 0rpx;
		.point-item{
			font-size: 24rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}
</style>