微信小程序(分类菜单左右联动)

wxml

<view class="menu">
  <scroll-view class="men_left" scroll-y="true">
    <view class="{{leftNum==index?'active':''}}" wx:for="{{menuArr}}" wx:key="*this" bindtap="leftClickFn" data-index='{{index}}'>{{item.title}}</view>
  </scroll-view>
  
  <scroll-view class="menu_right" scroll-with-animation="true" scroll-y="true" scroll-into-view="{{rightId}}" bindscroll="rightScroll"
    bindscrolltolower="lower">
    <view wx:for="{{menuArr}}" wx:key="*this" id="{{'right'+item.id}}" class="box">
      <view class="box_title">{{item.title}}</view>
      <view wx:for="{{item.subArr}}" wx:key="*this" wx:for-item="val" class="box_content">
        <!-- mode="widthFix" -->
        <image src="{{val.image}}"  alt="" />
        <view class="price">
          <view class="box_content_text">
            {{val.imgDesc}}
          </view>
          <view class="commodity_price">
            ￥{{val.price}}
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</view>

js

let heightArr=[0];//存放高度累计的数组 
Page({
  data: {
    menuArr: [{
      "id": 0,
      "title": "摩卡饮品",
      "subArr": [{
        "image": "https://img0.baidu.com/it/u=2916446339,1629829478&fm=26&fmt=auto&gp=0.jpg",
        "price": "15",
        "imgDesc": "标准美式"
      }, {
        "price": "15",
        "image": "https://img0.baidu.com/it/u=2916446339,1629829478&fm=26&fmt=auto&gp=0.jpg",
        "imgDesc": "标准咖啡"
      }, {
        "price": "15",
        "imgDesc": "牛美式",
        "image": "https://img0.baidu.com/it/u=2916446339,1629829478&fm=26&fmt=auto&gp=0.jpg",
      }, {
        "price": "15",
        "imgDesc": "标准摩卡",
        "image": "https://img0.baidu.com/it/u=2916446339,1629829478&fm=26&fmt=auto&gp=0.jpg",
      }, {
        "price": "15",
        "image": "https://img0.baidu.com/it/u=2916446339,1629829478&fm=26&fmt=auto&gp=0.jpg",
        "imgDesc": "银河气泡美式"
      }]
    }, {
      "id": 1,
      "title": "小鹿茶精选",
      "subArr": [{
        "price": "15",
        "image": "https://img0.baidu.com/it/u=2916446339,1629829478&fm=26&fmt=auto&gp=0.jpg",
        "imgDesc": "加浓美式"
      }, {
        "price": "15",
        "image": "https://img0.baidu.com/it/u=2916446339,1629829478&fm=26&fmt=auto&gp=0.jpg",
        "imgDesc": "加浓咖啡"
      }, {
        "price": "15",
        "image": "https://img0.baidu.com/it/u=2916446339,1629829478&fm=26&fmt=auto&gp=0.jpg",
        "imgDesc": "加浓美卡"
      }, {
        "image": "https://img0.baidu.com/it/u=2916446339,1629829478&fm=26&fmt=auto&gp=0.jpg",
        "imgDesc": "高级摩卡"
      }, {
        "price": "15",
        "image": "https://img0.baidu.com/it/u=2916446339,1629829478&fm=26&fmt=auto&gp=0.jpg",
        "imgDesc": "气泡美式"
      }]
    }, {

      "id": 2,
      "title": "宇天茶水铺",
      "subArr": [{
        "price": "15",
        "image": "https://img0.baidu.com/it/u=1568871315,2423262399&fm=26&fmt=auto&gp=0.jpg",
        "imgDesc": "红茶"
      }, {
        "price": "15",
        "image": "https://img0.baidu.com/it/u=1568871315,2423262399&fm=26&fmt=auto&gp=0.jpg",
        "imgDesc": "绿茶"
      }, {
        "price": "15",
        "image": "https://img0.baidu.com/it/u=1568871315,2423262399&fm=26&fmt=auto&gp=0.jpg",
        "imgDesc": "黑茶"
      }, {
        "price": "15",
        "image": "https://img0.baidu.com/it/u=1568871315,2423262399&fm=26&fmt=auto&gp=0.jpg",
        "imgDesc": "白茶"
      }, {
        "price": "15",
        "image": "https://img0.baidu.com/it/u=1568871315,2423262399&fm=26&fmt=auto&gp=0.jpg",
        "imgDesc": "茉莉花茶"
      }]
    }, {
      "id": 3,
      "title": "福建茶",
      "subArr": [{
        "price": "15",
        "image": "https://img0.baidu.com/it/u=1568871315,2423262399&fm=26&fmt=auto&gp=0.jpg",
        "imgDesc": "大红袍"
      }, {
        "price": "15",
        "image": "https://img0.baidu.com/it/u=1568871315,2423262399&fm=26&fmt=auto&gp=0.jpg",
        "imgDesc": "铁观音"
      }]
    }],
    //右侧对应的id
    rightId: 'right0',
    //左侧的当前项
    leftNum:0,
    flag:true
  },
  onReady() {
    //获取所有box的高度
    setTimeout(() => {
      const query = wx.createSelectorQuery()
      query.selectAll('.box').boundingClientRect()
      query.selectViewport().scrollOffset()
      query.exec(function (res) {
        // console.log(res[0])
        res[0].map(val=>{
          //永远拿heightArr一项来加上将要push进数组的这一项
          let result=val.height+heightArr[heightArr.length-1]
          heightArr.push(result) 
        })
        console.log(heightArr)
      })
      
    }, 100)
  
  },
  //左侧点击事件
  leftClickFn(e){
    console.log(e.currentTarget.dataset.index)
    this.setData({
      leftNum:e.currentTarget.dataset.index,
      rightId:'right'+e.currentTarget.dataset.index
    })
  },
  //右侧滚动事件
  rightScroll(e) {
    
    let st=e.detail.scrollTop
    if(this.data.flag){
      for(let i=0;i<heightArr.length;i++){
        if(st>=heightArr[i]&&st<heightArr[i+1]-5){
          this.setData({
            leftNum:i,
          })
          return
        }
      }
    }
  },
  //触底事件
  lower(){
    console.log(heightArr.length)
    this.setData({
      flag:false,
      leftNum:heightArr.length-2,
    })
    setTimeout(()=>{
      this.setData({
        flag:true
      })
    },200)
    console.log('触底了')
  },
})

wxss

.menu{
  /* 100vh等于整个屏幕的高  减去swiper的高 */
  height: calc(100vh - calc(100vw*461/750)); 
  /* background: coral; */
}
.men_left{
  width:30%;
  height: calc(100vh - calc(100vw*461/750)); 
  background: rgb(225, 227, 231);
  box-sizing: border-box;
  float: left;
}
.men_left view{
  height: 80rxp;
  line-height: 80rpx;
  border-bottom: 1px solid #ccc;
 
  text-align: center;
}
.men_left view.active{
  font-weight: bold;
  background: #fff;
}
/* 右侧样式 */
.menu_right{
  width: 70%;
  height: calc(100vh - calc(100vw*461/750)); 
  float: right;
  /* background: seagreen; */
}
.menu_right .box{
  padding: 0 20rpx;
}
.menu_right .box_title{
  height: 60rpx;
  line-height: 60rox;
  /* font-weight: bold; */
}
.menu_right .box_content{
  background: #fff;
  display: flex;
  /* align-items: center; */
  justify-content: flex-start;
  margin-bottom: 25rpx;
  margin-top: 10rpx;
}
.box_content_text{
  width: 100%;
  /* height: 100rpx; */
}
.box_content image{
  width: 130rpx!important;
  height: 130rpx;
  border-radius: 15rpx;
}
.price{
  margin-left: 30rpx;
  display: flex;
  flex-direction:column;
  justify-content: space-around;
}
.commodity_price{
  font-weight: bold;
}

app.wxss全局样式

//隐藏scroll-view滚动条
::-webkit-scrollbar {
  display:none;
  width:0;
  height:0;
  color:transparent;
}