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

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;
}