原创

菜单左右联动组件


联动 左菜单边点击右边滚动至对应区域,右边滚动左边菜单动态显示当前区域所对应的菜单项

<template>
	<view class="box">
		<view class="box-left">
			<view class="box-left-item" v-for="(item,index) in list" :key="index" @click="menuTab(index)" :class="{active: index===linkageIndex}">
				{{item.title}}
			</view>
		</view>
		<view class="box-right">
			<scroll-view 
				scroll-y="true"
				style="height: 200px;"
				:scroll-into-view="linkageString"
				@scroll="scrollIng"
				@scrolltolower="scrollLower"
				scroll-with-animation
			>
				<view v-for="(item,index) in list" :key="index">
					<view class="box-right-title" :id="'web'+index">
						{{item.title}}
					</view>
					<view class="box-right-item" v-for="(item2,index2) in item.children" :key="index2">
						{{item2}}
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				linkageIndex: 0,
				linkageString: "",
				titleTopList: [],
				list:[
					{
						title: "宠物",
						children:["蝙蝠","蛇","蛤蟆","蜈蚣"]
					},
					{
						title: "植物",
						children:["食人花","含羞草","臭屁花","面包树"]
					},
					{
						title:"食物",
						children:["面包","鸡蛋","面条","白米饭"]
					},
					{
						title:"生活用品",
						children:["牙刷","浴巾","床单","枕头","棉被","板凳","菜刀"]
					}
				]
			}
		},
		methods: {
			menuTab(index){
				this.linkageIndex = index,
				this.linkageString = "web" + index
			},
			getNodesInfo(){
				const query = uni.createSelectorQuery().in(this)
				query.selectAll('.box-right-title').boundingClientRect().exec((res)=>{
					let nodes = res[0]
					let titleTopList = []
					nodes.map(item=>{
						titleTopList.push(item.top)
					})
					this.titleTopList = titleTopList
				})
			},
			scrollIng(e){
				let scrollTop = e.target.scrollTop
				for (let i = 0; i < this.titleTopList.length; i++) {
					let h1 = this.titleTopList[i]
					let h2 = this.titleTopList[i+1]
					if(scrollTop>h1 && scrollTop < h2){
						this.linkageIndex = i
						break
					}
				}
			},
			scrollLower(){
				setTimeout(()=>{
				this.linkageIndex = this.titleTopList.length - 1
				},100)
			}
		},
		onReady() {
			this.getNodesInfo()
		}
	}
</script>

<style scoped>
.box{
	height: 200px;
	background-color: #fafafa;
	display: flex;
}
.box-left{
	background-color: #d8e5ff;
	overflow-y: auto;
	padding: 0 5px;
}
.box-right{
	flex: 1;
	padding: 0 5px;
}
.box-left-item,.box-right-title{
	line-height: 30px;
	font-weight: bold;
}
.box-right-title{
	background-color: #4CD964;
}
.active{
	background-color: #ff557f;
}
.box-right-item{
	line-height: 30px;
}
</style>


部分截图

组件
  • 作者:零三(联系作者)
  • 最后更新时间:2020-01-31 23:26
  • 版权声明:自由转载-非商用-非衍生-保持署名
  • 转载声明:来源地址 https://web03.cn