微信小程式實現點餐小程式左側滑動選單

<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">規格：{{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]  // 存放高度累加陣列
data: {
    rightId: 'right0',
    leftView: 0
  },
/**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
    const query = wx.createSelectorQuery()
    query.selectAll('.goods').boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec(function (res) {
      res[0].top // #the-id節點的上邊界座標
      res[1].scrollTop // 顯示區域的豎直捲動位置
      res[0].map( val => {
        let result = val.height  + heightArr[heightArr.length - 1]
        console.log(result)
        // 拿後一個view盒子的高度加上前面的高度
        heightArr.push(result) 
      })
      console.log(heightArr)
    })
  
  },
/**
   * 左側選單點選事件,事件物件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
    })
  },

  /**
   * 右側捲動事件
   */
  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;
}

/* 左側選單導航欄 */
.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);
}