美团点餐左侧菜单滑动

Posted 2023-02-18

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

<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>
打开CSDN，阅读体验更佳
参与评论 请先 登录 后发表或查 参考技术A 您好，设置里面有个辅助设置，点开辅助设置进行修改就可以了。 参考技术B 设置里面有个辅助设置，点开辅助设置进行修改就可以了。