有三步

  1. 初始化左右滑块的高度
  2. 得到右边每个区间的top和buttom
  3. 监听右边商品部分滑动事件,如果在某个区间内,则那个区间的菜单名高亮

主界面index.vue

	<view style="display: flex;">
	<!-- 菜单 -->
	<food-menu :tabBars="tabBars" :tabIndexShow="tabIndexShow" :swiperWidth="menuWidth" :swiperHeight="swiperHeight" @tabtap="tabtap"></food-menu>
	<!-- 商品 -->
	<scroll-view scroll-y="true" @scroll="scrollGet($event)" scroll-with-animation :scroll-into-view="'tab_'+tabIndex"
	 :style="{height:swiperHeight+'px',width:foodWidth+'px'}" style="padding-top: 20px;">
		<block v-for="(items,index) in foodsList" :key="index">
			<view :id="'tab_'+tabBars[index].id">
				<view style="font-size: 30upx;height: 40upx;margin-left: 20upx;">
					{{tabBars[index].name}}
				</view>
				<template v-if="items.list.length>0">
					<block v-for="(item,index1) in items.list" :key="index1">
						<food-component @showModal="showModal" :item="item"></food-component>
					</block>
				</template>
				<template v-else>
					该菜单尚未添加商品
				</template>
			</view>
		</block>
	</scroll-view>
</view>

<script>
	import foodComponent from "./food-component.vue"
	import foodMenu from "./food-menu.vue"

	export default {
		components: {
			foodComponent,
			foodMenu
		},
		data() {
			return {
				swiperHeight: 0,
				menuWidth: 0,
				foodWidth: 0,
				tabIndexShow: 0,
				tabIndex: 0,
				scroNum: [], //记录商品的高度
				tabBars: [{
						name: "粑粑",
						id: "0"
					},
					{
						name: "粥粥",
						id: "1"
					},
					{
						name: "包包",
						id: "2"
					},
					{
						name: "面面",
						id: "3"
					},
					{
						name: "粉粉",
						id: "4"
					},
					{
						name: "肉肉",
						id: "5"
					},
				],
				foodsList: [{
						list: [{
							food_name: "小米南瓜粥", //名字
							food_price: 13.5, //价格
							food_image: "../../static/logo.jpg",
							title: "我是标题",
							num: 100
						}, {
							food_name: "小米南瓜粥", //名字
							food_price: 13.5, //价格
							food_image: "../../static/logo.jpg",
							title: "我是标题",
							num: 100
						},{
							food_name: "小米南瓜粥", //名字
							food_price: 13.5, //价格
							food_image: "../../static/logo.jpg",
							title: "我是标题",
							num: 100
						},{
							food_name: "小米南瓜粥", //名字
							food_price: 13.5, //价格
							food_image: "../../static/logo.jpg",
							title: "我是标题",
							num: 100
						},{
							food_name: "小米南瓜粥", //名字
							food_price: 13.5, //价格
							food_image: "../../static/logo.jpg",
							title: "我是标题",
							num: 100
						},{
							food_name: "小米南瓜粥", //名字
							food_price: 13.5, //价格
							food_image: "../../static/logo.jpg",
							title: "我是标题",
							num: 100
						},{
							food_name: "小米南瓜粥", //名字
							food_price: 13.5, //价格
							food_image: "../../static/logo.jpg",
							title: "我是标题",
							num: 100
						},{
							food_name: "小米南瓜粥", //名字
							food_price: 13.5, //价格
							food_image: "../../static/logo.jpg",
							title: "我是标题",
							num: 100
							},{
							food_name: "小米南瓜粥", //名字
							food_price: 13.5, //价格
							food_image: "../../static/logo.jpg",
							title: "我是标题",
							num: 100
						}]
					},
					{
						list: [{
							food_name: "黑米粥", //名字
							food_price: 199, //价格
							food_image: "../../static/test.jpg",
							title: "我是标题",
							num: 100
						}, {
							food_name: "黑米粥", //名字
							food_price: 199, //价格
							food_image: "../../static/test.jpg",
							title: "我是标题",
							num: 100
						}, {
							food_name: "黑米粥", //名字
							food_price: 199, //价格
							food_image: "../../static/test.jpg",
							title: "我是标题",
							num: 100
						}, {
							food_name: "黑米粥", //名字
							food_price: 199, //价格
							food_image: "../../static/test.jpg",
							title: "我是标题",
							num: 100
						}, {
							food_name: "黑米粥", //名字
							food_price: 199, //价格
							food_image: "../../static/test.jpg",
							title: "我是标题",
							num: 100
						}, {
							food_name: "黑米粥", //名字
							food_price: 199, //价格
							food_image: "../../static/test.jpg",
							title: "我是标题",
							num: 100
						}, {
							food_name: "黑米粥", //名字
							food_price: 199, //价格
							food_image: "../../static/test.jpg",
							title: "我是标题",
							num: 100
						}, {
							food_name: "黑米粥", //名字
							food_price: 199, //价格
							food_image: "../../static/test.jpg",
							title: "我是标题",
							num: 100
						}, {
							food_name: "黑米粥", //名字
							food_price: 199, //价格
							food_image: "../../static/test.jpg",
							title: "我是标题",
							num: 100
						}, {
							food_name: "黑米粥", //名字
							food_price: 199, //价格
							food_image: "../../static/test.jpg",
							title: "我是标题",
							num: 100
						}, {
							food_name: "黑米粥", //名字
							food_price: 199, //价格
							food_image: "../../static/test.jpg",
							title: "我是标题",
							num: 100
						}, ]
					},
					{
						list: [{
							food_name: "白米粥", //名字
							food_price: 299, //价格
							food_image: "../../static/logo.jpg",
							title: "我是标题",
							num: 100,
							priority: 11, //优先级
							display: 1, //是否显示
						}, ]
					},
					{
						list: [{
							food_name: "包子", //名字
							food_price: 5, //价格
							food_image: "../../static/logo.jpg",
							title: "我是标题",
							num: 100
						}, ]
					},
					{
						list: [{
							food_name: "饺子", //名字
							food_price: 100, //价格
							food_image: "../../static/logo.jpg",
							title: "我是标题",
							num: 100
						}, ]
					},
					{
						list: [{
							food_name: "肉肉", //名字
							food_price: 999, //价格
							food_image: "../../static/logo.jpg",
							title: "我是标题",
							num: 100
						}, ]
					}
				]
			}
		},
		onLoad() {
			//初始化页面的组件大小
			uni.getSystemInfo({
				success: (res) => {
					// - uni.upx2px(100) 减去头部的列表
					let height = res.windowHeight
					let windowWidth = res.windowWidth
					this.swiperHeight = height - uni.upx2px(153)
					this.menuWidth = windowWidth / 5
					this.foodWidth = windowWidth * 4 / 5
				}
			});
		},
		mounted() {
			this.loadScroNum();
		},
		methods: {
			//初始化右边商品的高度、起始高度数组,便于右边滑动,左边跟着动
			loadScroNum() {
				for (var i = 0; i < this.tabBars.length; i++) {
					wx.createSelectorQuery().select('#tab_' + i).boundingClientRect(e => {
						this.scroNum.push({
							top: e.top,
							bot: e.top + e.height
						})
					}).exec()
				}
			},
			// 监听子组件的tab点击事件
			tabtap(index) {
				this.tabIndexShow = index;
				this.tabIndex = index;
			},
			//监听右侧商品栏滑动事件,如果当前滑动的长度达到某个个区间内,则该区间的菜单为高亮
			scrollGet(e) {
				var now = parseInt(e.detail.scrollTop) + 40
				for (var i = 0; i < this.tabBars.length; i++) {
					if (now > this.scroNum[i].top && now < this.scroNum[i].bot) {
						this.tabIndexShow = i
						return
					}
				}
			}
		}
	}
</script>

<style>
	.swiper-tab-list {
		width: 100%;
		text-align: center;
		color: #808080;
		font-size: 36upx;
		height: 160upx;
		line-height: 160upx;
	}

	.active {
		color: #FEDE33;
	}
</style>


菜单组件 food-menu.vue

<template>
	<view style="flex:1;background-color: #f1f2f5;">
		<scroll-view scroll-y="true" :style="{height:swiperHeight+'px',width:swiperWidth+'px'}">
			 <block v-for="(tab,index) in tabBars" :key="tab.id">
				<view 
				class="swiper-tab-list" 
				:class="{'active':(tabIndexShow===index)}" 
				@tap="tabtap(index)">
					{{tab.name}} {{tab.num?tab.num:''}}
					<view class="swiper-tab-line"></view>
				</view>
			 </block>
		</scroll-view>
	</view>
</template>

<script>
	export default{
		props:{
			tabBars:Array,
			tabIndexShow:Number,
			swiperHeight:Number,
			swiperWidth:Number
		},
		methods: {
			// tab点击事件
			tabtap(index) {
				this.$emit('tabtap',index)
				// 子组件相同名称的属性值改变后,父组件的对应监听事件结束后,将修改父组件的该属性和子属性一样
				// this.tabIndex = index;
			},
		}
	}
</script>

<style scoped>
	.swiper-tab-list{
		width: 100%;text-align: center;
		color: #808080;
		font-size: 36upx;
		height: 160upx;
		line-height: 160upx;
	}
	.active {
		color: #000000;
		font-weight: bold;
		background-color: #FFFFFF;
	}
</style>


商品组件 food-component.vue

<template>
	<view class="box">
		<image class="food_image" :src="item.food_image"></image>
		<view class="content">
			<view class="title">{{item.food_name}}</view>
			<view class="foodNum">月售{{item.num}}</view>
			<view class="money">{{item.food_price}}</view>
			<view class="search">挑选规格</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: Object
		},
		data() {
			return {
				
			}
		},
		methods: {
		}
	}
</script>

<style>
	.box{
		min-height: 190rpx;width: 100%;padding: 5rpx;display: flex;
		height: auto;
	}
	.box>.food_image{
		height: 160rpx;width: 160rpx;border-radius: 5%;margin:15rpx
	}
	.box>.content{
		padding: 5rpx;margin-left: 5rpx;width: calc(100% - 195rpx);position: relative;
	}
	.box>.content>.title{
		font-size: 36rpx;font-weight: 600;
	}
	.box>.content>.foodNum{
		font-size: 25rpx;color: #6D6D72;
	}
	.box>.content>.money{
		font-size: 40rpx;color: #FF0000;font-weight: 600;float: left;
	}
	.box>.content>.money{
		font-size: 40rpx;color: #FF0000;font-weight: 600;float: left;
	}
	.box>.content>.search{
		font-size: 32rpx;font-weight: 600;float: right;background-color: #FFA200;position: absolute;right: 40rpx;bottom: 20rpx;border-radius: 5%;padding: 0 5rpx;
	}
</style>


Logo

前往低代码交流专区

更多推荐