【uni-app、vue】scroll滑动、二级分类任性多选

<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="uni-title uni-common-mt">
				Vertical Scroll
				<text>\n纵向滚动\n</text>
				当前已选一级分类：
				<view class="father-selected-container-lrx"  @tap="getType1">
					<view class="fatherSelected" v-for="item in allFathersSelected" :key="item.id" :id="JSON.stringify(item)">{{item.name}}</view>
				</view>
				当前已选二级分类：
				<view class="son-selected-container-lrx"  @tap="getType2">
					<view class="sonSelected" v-for="item in allSonsSelected" :key="item.id" :id="JSON.stringify(item)">{{item.name}}</view>
				</view>
			</view>
			<view class="sc-container-lrx">
				<view>
					<scroll-view
						:style="{ height: myheight }"
						:scroll-top="scrollTop1"
						scroll-y="true"
						class="scroll-Y firstSC"
						@scrolltoupper="upper1"
						@scrolltolower="lower1"
						@scroll="scroll1"
						@tap="getType1"
					>
						<view v-for="(item,index) in allFathers" :key="index" :id="JSON.stringify(item)" :class="item.selected?'scroll-view-item uni-bg-blue':'scroll-view-item outline-lrx'" >{{item.name}}</view>
					</scroll-view>
				</view>
				<view>
					<scroll-view
						:style="{ height: myheight }"
						:scroll-top="scrollTop2"
						scroll-y="true"
						class="scroll-Y"
						@scrolltoupper="upper2"
						@scrolltolower="lower2"
						@scroll="scroll2"
						@tap="getType2"
					>
						<view v-for="(item,index) in allSonsReady" :key="index" :id="JSON.stringify(item)" :class="item.selected?'scroll-view-item uni-bg-blue':'scroll-view-item outline-lrx'">{{item.name}}</view>
					</scroll-view>
				</view>
			</view>
			<view class="gotop-container-lrx">
				<view @tap="goTop1" class=" uni-link uni-center uni-common-mt">点击这里返回顶部</view>
				<view @tap="goTop2" class="uni-link uni-center uni-common-mt">点击这里返回顶部</view>
			</view>
		</view>
	</view>
</template>
<script>
	
export default {
	
	data() {
		return {
			// arr: [1,2,3,4,5,6,7,8,9,87,7,7,71,2,3,4,5,6,7,8,9,87,7,7,71,2,3,4,5,6,7,8,9,87,7,7,71,2,3,4,5,6,7,8,9,87,7,7,71,2,3,4,5,6,7,8,9,87,7,7,71,2,3,4,5,6,7,8,9,87,7,7,7,7,78,9,9,9,88,7,74,4,131,2,3,4,5,6,7,8,9,87,7,7,7,7,78,9,9,9,88,7,74,4,131,2,3,4,5,6,7,8,9,87,7,7,7,7,78,9,9,9,88,7,74,4,131,2,3,4,5,6,7,8,9,87,7,7,7,7,78,9,9,9,88,7,74,4,13],
			scrollTop1: 0,
			scrollTop2: 0,
			old: {
				scrollTop1: 0,
				scrollTop2: 0
			},
			// currentFather:3,
			types: [
				{ father: 0, name: '火锅', id: '1' , selected:false},
				{ father: 0, name: '炒菜', id: '2' , selected:false},
				{ father: 0, name: '西餐', id: '3' , selected:false},
				{ father: 1, name: '四川火锅', id: '4' , selected:false},
				{ father: 1, name: '重庆火锅', id: '5' , selected:false},
				{ father: 1, name: '北京火锅', id: '6' , selected:false},
				{ father: 1, name: '东北火锅', id: '7' , selected:false},
				{ father: 1, name: '西藏火锅', id: '8' , selected:false},
				{ father: 2, name: '川菜', id: '9' , selected:false},
				{ father: 2, name: '鲁菜', id: '10' , selected:false},
				{ father: 2, name: '淮扬菜', id: '11' , selected:false},
				{ father: 2, name: '粤菜', id: '12' , selected:false},
				{ father: 3, name: '法国菜', id: '13' , selected:false},
				{ father: 3, name: '日式料理', id: '14' , selected:false},
				{ father: 3, name: '东南亚料理', id: '15' , selected:false}
			],
			// fatherSelected:[//已经选择的一级分类
			// ],
			// sonSelected:[]
		};
	},
	computed: {
		allFathers(){//所有等待选择father
			return this.types.filter(item=>item.father==0)
		},
		allSonsSelected(){//所有已经选择的son
			return this.types.filter(item=>item.father!=0).filter(item=>item.selected);
		},
		allFathersSelected(){//所有已经选择的father
			return this.allFathers.filter(item=>item.selected);
		},
		allSonsReady(){//所有等待选择的son
			let allFathersSelectedId = this.allFathersSelected.map(item=>item.id);
			return this.types.filter(item=>item.father!=0).filter(item=>allFathersSelectedId.indexOf(""+item.father)!=-1)
		},
		myheight() {
			let height = 0,
				top = 150, //顶部预留 单位ups
				bottom = 100, //底部预留 单位ups
				times = 1.8; //uni.getSystemInfoSync().windowHeight太小了，给个翻倍系数

			try {
				height = uni.getSystemInfoSync().windowHeight * times;
			} catch (e) {
				height = 750 * times;
			}
			return uni.upx2px(height - top - bottom) + 'px';
		}
	},
	onLoad() {},
	methods: {
		// 到顶了
		upper1: function(e) {
			console.log('到顶了1', e);
		},
		upper2: function(e) {
			console.log('到顶了2', e);
		},
		// 到底了
		lower1: function(e) {
			console.log('到底了1', e);
		},
		lower2: function(e) {
			console.log('到底了2', e);
		},
		//滑动的时候触发
		scroll1: function(e) {
			this.old.scrollTop1 = e.detail.scrollTop;
		},
		scroll2: function(e) {
			this.old.scrollTop2 = e.detail.scrollTop;
		},
		//返回到顶部
		goTop1: function(e) {
			// 解决view层不同步的问题
			this.scrollTop1 = this.old.scrollTop1;
			this.$nextTick(function() {
				this.scrollTop1 = 0;
			});
			uni.showToast({
				icon: 'none',
				title: '纵向滚动 scrollTop 值已被修改为 0'
			});
		},
		goTop2: function(e) {
			// 解决view层不同步的问题
			this.scrollTop2 = this.old.scrollTop2;
			this.$nextTick(function() {
				this.scrollTop2 = 0;
			});
			uni.showToast({
				icon: 'none',
				title: '纵向滚动 scrollTop 值已被修改为 0'
			});
		},
		getType1:function(e){
			let current = e.target.id?JSON.parse(e.target.id):false;
			let types = this.types;
			if(current){//点在了item上
				types.forEach(item=>{//对他的选择状态取反
					if(item.id==current.id){
						item.selected = !item.selected
					}
				})
				//不管是取消还是选择，他的son都应该设置为false
				types.filter(item=>item.father!==0).forEach(item=>{
					if(item.father==current.id){
						item.selected = false;
					}
				})
			}
			this.types= types;
		},
		getType2:function(e){
			let current = e.target.id?JSON.parse(e.target.id):false;
			let types = this.types;
			if(current){
				types.forEach(item=>{
					if(item.id==current.id){
						item.selected = !item.selected
					}
				})
			}
			this.types = types;
		}
	}
};
</script>

<style>
@font-face {
	font-family: uniicons;
	font-weight: normal;
	font-style: normal;
	src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf') format('truetype');
}
.outline-lrx{
	border: 1upx solid rgb(0,122,255);
}
.scroll-Y {
	height: 300upx;
}
scroll-view {
	width: 320upx;
}
.scroll-view-item {
	border: 1upx solid rgb(0,122,255);
	height: 50upx;
	line-height: 50upx;
	text-align: center;
	font-size: 18upx;
	display: inline-block;
	width: 38%;
	padding: 2%;
	margin: 3%;
}
.test {
	background: green;
}
.sc-container-lrx{
	display: flex;
	justify-content: space-between;
}
.gotop-container-lrx{
	display: flex;
	justify-content: space-between;
}
.gotop-container-lrx view{
	width: 50%;
}
.firstSC{
	padding-right: 25upx;
	border-right: 1upx solid #cccccc;
}
.fatherSelected,.sonSelected{
	border: 1px solid rgb(0,122,255);
	border-radius: 10upx;
	padding: 5upx 15upx;
	margin: 5upx 10upx;	
	position: relative;
}
.fatherSelected::after,.sonSelected::after{
	content: "\2718";
	font-size: 20upx;
	color: red;
	position: absolute;
	top: -20upx;
	right: -10upx;
}

.father-selected-container-lrx,.son-selected-container-lrx{
	display: flex;
	justify-content: flex-start;
	align-content: center;
	flex-wrap: wrap;
}
</style>

截图如下