<view>
? <view class="menuMain">
? ? <scroll-view scroll-y="true" class="menuLeft">
? ? ? <view wx:for="{{menuArr}}" wx:key="*this" bindtap="leftMenuClick" data-current_index="{{index}}" class="{{leftView == index ? 'active' : ''}}">{{item.name}}

? ? ? </view>
? ? </scroll-view>
? ? <scroll-view scroll-y="true" scroll-with-animation="true" bindscroll="rightScroll" scroll-into-view="{{rightId}}"
? ? ?class="menuRight">
? ? ? <view ?wx:for="{{menuArr}}" wx:key="*this" id="{{ 'right' + item.id}}" class="goods">
? ? ? ? <view class="goodsType">
? ? ? ? ?--- ?{{item.name}} ---
? ? ? ? </view>
? ? ? ? <view wx:for="{{item.subArr}}" wx:key="*this" wx:for-item="goods" class="goodsContent">
? ? ? ? ? <view class="orderDishes">
? ? ? ? ? ? <image src="{{goods.imageUrl}}" ></image>
? ? ? ? ? ? <view class="goodsInfo">
? ? ? ? ? ? ? <view class="goodsInfo">{{goods.goodsName}}</view>
? ? ? ? ? ? ? <view class="goodsInfo">規(guī)格：{{goods.unit}}</view>
? ? ? ? ? ? ? <view class="goodsInfo goodsInfoPrice">￥{{goods.price}}</view>
? ? ? ? ? ? ? <view class="add">
? ? ? ? ? ? ? ? +
? ? ? ? ? ? ? </view>
? ? ? ? ? ? </view>
? ? ? ? ? </view>
? ? ? ? </view>
? ? ? </view>
? ? </scroll-view>
? </view>


</view>

let heightArr = [0] ?// 存放高度累加數(shù)組
data: {
? ? rightId: 'right0',
? ? leftView: 0
? },
/**
? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
? ?*/
? onReady: function () {
? ? const query = wx.createSelectorQuery()
? ? query.selectAll('.goods').boundingClientRect()
? ? query.selectViewport().scrollOffset()
? ? query.exec(function (res) {
? ? ? res[0].top // #the-id節(jié)點(diǎn)的上邊界坐標(biāo)
? ? ? res[1].scrollTop // 顯示區(qū)域的豎直滾動(dòng)位置
? ? ? res[0].map( val => {
? ? ? ? let result = val.height ?+ heightArr[heightArr.length - 1]
? ? ? ? console.log(result)
? ? ? ? // 拿后一個(gè)view盒子的高度加上前面的高度
? ? ? ? heightArr.push(result)?
? ? ? })
? ? ? console.log(heightArr)
? ? })
??
? },
/**
? ?* 左側(cè)菜單點(diǎn)擊事件,事件對(duì)象e傳輸index
? ?*/
? leftMenuClick(e){
? ? console.log(e.currentTarget.dataset.current_index)
? ? this.setData({
? ? ? leftView: e.currentTarget.dataset.current_index,
? ? ? rightId: 'right' + e.currentTarget.dataset.current_index
? ? })
? },

? /**
? ?* 右側(cè)滾動(dòng)事件
? ?*/
? rightScroll(e) {
? ? let st = e.detail.scrollTop
? ? console.log('st' + e.detail.scrollTop)
? ? for(let i = 0; i < heightArr.length; i++){
? ? ? if(st >= heightArr[i] && st <= heightArr[i+1] - 5){
? ? ? ? this.setData({
? ? ? ? ? leftView: i,
? ? ? ? })
? ? ? ? console.log(this.data.leftView)
? ? ? ? return
? ? ? }
? ? }
? }

/* pages/order/order.wxss */

.link {
? height: 30px;
}

.mainMenu {
? width: 180rpx;
}

.menuMain {
? height: 100vh;
? display: flex;
? flex-direction: row;
? justify-content: space-around;
}

/* 左側(cè)菜單導(dǎo)航欄 */
.menuLeft {
? width: 20%;
}

.menuLeft view {
? font-size: 26rpx;
? text-align: center;
? height: 100rpx;
? line-height: 100rpx;
? background-color: rgb(238, 241, 241);
? position: relative;
}
.menuLeft view.active{
? background-color: rgb(255, 255, 255);
}

.menuLeft view::before {
? content: '';
? width: 6rpx;
? height: 100%;
? position: absolute;
? left: 0;
? top: 0;
? background-color:transparent;
? border-left: none;
}

.menuLeft view.active::before {
? background-color: rgb(245, 229, 6);
}


.menuRight {
? height: 100vh;
? width: 75%;
}

.menuRight .goods{
? padding: 10rpx;
}

.menuRight .goodsType{
? text-align: center;
? height: 60rpx;
? line-height: 60rpx;
? font-weight: 600;
? color: rgb(0, 0, 0);
}

.menuRight .goods .goodsContent .orderDishes image{
? width: 320rpx;
? height: 260rpx;
}


.menuRight .goods .goodsContent text{
? overflow: hidden;
? text-overflow: ellipsis;
? white-space: nowrap;
}

.orderDishes{
? padding-top: 20rpx;
? display: flex;
? flex-direction: row;
}

.add{
? margin-left: 40rpx;
? margin-top: 10rpx;
? width: 120rpx;
? font-size: 40rpx;
? font-weight: 600;
? height: 40rpx;
? line-height: 40rpx;
? text-align: center;
? background-color: rgb(219, 80, 55);
? border-radius: 20rpx;
? color: rgb(255, 255, 255);
}

.goodsInfo{
? margin-left: 16rpx;
? height: 65rpx;
? font-size: 28rpx;
? font-weight: 800;
? color: rgb(0, 0, 0);
}


.goodsInfoPrice{
? color: rgb(247, 36, 36);
}