微信小程序左右联动

好记性不如烂笔头

wxml

    
        
            
                {{item.name}}
                    
                
            
        
    

    
        
            
            
                
            
                
            
        
            
            
                
                    
                        {{item.title}}
                        
                            
                                
                                {{i.text}}
                            
                        
                    
                
            
        
    

　　js

const app = getApp()
 
Page({
  data: {
    qing_list:["1","2"],
    toView: 'a1',
    activeId: 'a1',
    category: [
      {name: '新品', id: 'a1'},
      { name: '众筹', id: 'a2' },
      { name: '小米手机', id: 'a3' },
      { name: 'redmi手机', id: 'a4' },
      { name: '黑鲨游戏', id: 'a5' },
      { name: "手机配件", id: 'a6' },
      { name: '电视', id: 'a7'},
      { name: '电脑8', id: 'a8' },
      { name: '电脑9', id: 'a9' },
      { name: '电脑10', id: 'a10' },
      { name: '电脑11', id: 'a11' },
      { name: '电脑12', id: 'a12' },
      { name: '电脑13', id: 'a13' },
    ],
    content: [
      {
        title: '- 新品 -', 
        options: [
          { src: '../../images/baoxiudan.png',id: '001',text: 'redmi8aaaaaaaaaaaaaaaaaaaaa'},
          { src: '../../images/baoxiudan.png', id: '002', text: 'redmi8A' },
          { src: '../../images/baoxiudan.png', id: '003', text: '小米9pro 5G'},
          { src: '../../images/baoxiudan.png', id: '004', text: 'redmi8'},
          { src: '../../images/baoxiudan.png', id: '005',text: 'redmi8' }
        ],
        id: 'a1'
      },
      {
        title: '- 众筹 -',
        options: [
          { src: '../../images/duihuan.png', id: '006', text: 'redmi8' },
          { src: '../../images/duihuan.png', id: '007' ,text: 'redmi8'},
          { src: '../../images/duihuan.png', id: '008', text: 'redmi8' },
          { src: '../../images/duihuan.png', id: '009',text: 'redmi8' }
        ],
        id: 'a2'
      },
      {
        title: '- 小米手机 -',
        options: [
          { src: '../../images/dizhi.png', id: '006', text: 'redmi8' },
          { src: '../../images/dizhi.png', id: '007', text: 'redmi8' },
          { src: '../../images/dizhi.png', id: '008', text: 'redmi8' },
          { src: '../../images/dizhi.png', id: '009', text: 'redmi8' }
        ],
         id: 'a3'
      },
      {
        title: '- redmi手机 -',
        options: [
          { src: '../../images/jiebang.png', id: '006', text: 'redmi8' },
          { src: '../../images/jiebang.png', id: '007', text: 'redmi8' },
          { src: '../../images/jiebang.png', id: '008', text: 'redmi8' },
          { src: '../../images/jiebang.png', id: '009', text: 'redmi8' }
        ],
        id: 'a4'
      },
      {
        title: '- 黑鲨游戏 -', 
        options: [
          { src: '../../images/baoxiudan.png',id: '001',text: 'redmi8'},
          { src: '../../images/baoxiudan.png', id: '002', text: 'redmi8A' },
          { src: '../../images/baoxiudan.png', id: '003', text: '小米9pro 5G'},
          { src: '../../images/baoxiudan.png', id: '004', text: 'redmi8'},
          { src: '../../images/baoxiudan.png', id: '005',text: 'redmi8' }
        ],
        id: 'a5'
      },
      {
        title: '- 手机配件 -',
        options: [
          { src: '../../images/duihuan.png', id: '006', text: 'redmi8' },
          { src: '../../images/duihuan.png', id: '007' ,text: 'redmi8'},
          { src: '../../images/duihuan.png', id: '008', text: 'redmi8' },
          { src: '../../images/duihuan.png', id: '009',text: 'redmi8' }
        ],
        id: 'a6'
      },
      {
        title: '- 电视 -',
        options: [
          { src: '../../images/dizhi.png', id: '006', text: 'redmi8' },
          { src: '../../images/dizhi.png', id: '007', text: 'redmi8' },
          { src: '../../images/dizhi.png', id: '008', text: 'redmi8' },
          { src: '../../images/dizhi.png', id: '009', text: 'redmi8' }
        ],
         id: 'a7'
      },
      {
        title: '- 电脑 8-',
        options: [
          { src: '../../images/jiebang.png', id: '006', text: 'redmi8' },
          { src: '../../images/jiebang.png', id: '007', text: 'redmi8' },
          { src: '../../images/jiebang.png', id: '008', text: 'redmi8' },
          { src: '../../images/jiebang.png', id: '009', text: 'redmi8' }
        ],
        id: 'a8'
      },
      {
        title: '- 电脑 9-',
        options: [
          { src: '../../images/jiebang.png', id: '006', text: 'redmi8' },
          { src: '../../images/jiebang.png', id: '007', text: 'redmi8' },
          { src: '../../images/jiebang.png', id: '008', text: 'redmi8' },
          { src: '../../images/jiebang.png', id: '009', text: 'redmi8' }
        ],
        id: 'a9'
      },
      {
        title: '- 电脑 10-',
        options: [
          { src: '../../images/jiebang.png', id: '006', text: 'redmi8' },
          { src: '../../images/jiebang.png', id: '007', text: 'redmi8' },
          { src: '../../images/jiebang.png', id: '008', text: 'redmi8' },
          { src: '../../images/jiebang.png', id: '009', text: 'redmi8' }
        ],
        id: 'a10'
      },
      {
        title: '- 电脑 11-',
        options: [
          { src: '../../images/jiebang.png', id: '006', text: 'redmi8' },
          { src: '../../images/jiebang.png', id: '007', text: 'redmi8' },
          { src: '../../images/jiebang.png', id: '008', text: 'redmi8' },
          { src: '../../images/jiebang.png', id: '009', text: 'redmi8' }
        ],
        id: 'a11'
      },
      {
        title: '- 电脑 12-',
        options: [
          { src: '../../images/jiebang.png', id: '006', text: 'redmi8' },
          { src: '../../images/jiebang.png', id: '007', text: 'redmi8' },
          { src: '../../images/jiebang.png', id: '008', text: 'redmi8' },
          { src: '../../images/jiebang.png', id: '009', text: 'redmi8' }
        ],
        id: 'a12'
      },
      {
        title: '- 电脑 13-',
        options: [
          { src: '../../images/jiebang.png', id: '006', text: 'redmi8' },
          { src: '../../images/jiebang.png', id: '007', text: 'redmi8' },
          { src: '../../images/jiebang.png', id: '008', text: 'redmi8' },
          { src: '../../images/jiebang.png', id: '009', text: 'redmi8' }
        ],
        id: 'a13'
      },
    ],
  },
  //事件处理函数
  onLoad: function () {
    this.setData({
      toView: 'a1',
      heightArr: []
    })
    let query = wx.createSelectorQuery();
    query.selectAll('.catefory-main').boundingClientRect((rect)=> {
      rect.forEach(ele => {
        this.calculateHeight(ele.height);
      })
    }).exec();
  },
  clickItem(e) {
    this.setData({
      activeId: e.currentTarget.dataset.id,
      toView: e.currentTarget.dataset.id
    })
  },
  scroll(e) {
    let scrollHeight = e.detail.scrollTop;
    let index = this.calculateIndex(this.data.heightArr,scrollHeight);
    this.setData({
      activeId: 'a'+index
    })
 
  },
  // 计算滚动的区间
  calculateHeight(height) {
    if(!this.data.heightArr.length) {
      this.data.heightArr.push(height)
    }else {
      // this.data.heightArr.forEach(ele => {
      //   height += ele
      // })
      height += this.data.heightArr[this.data.heightArr.length-1]
      this.data.heightArr.push(height);
    }
  },
  // 计算左边选中的下标
  calculateIndex(arr, scrollHeight) {
    let index= '';
    for(let i =0;i= 0 && scrollHeight < arr[0]){
        index = 0;
      }else if(scrollHeight >= arr[i-1] && scrollHeight < arr[i]){
        index = i;
      }
    }
    return index+1;
  }
})

wxss

.container {
  padding: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.category-left {
  height: 100%;
  width: 22%;
  box-sizing: border-box;
}

.catgegory-item {
  width: 100%;
  padding: 20rpx 0;
  font-size: 26rpx;
  text-align: center;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 2;
  color: #333333;
  position: relative;
}

.lvtiao {
  position: absolute;
  width: 8rpx;
  height: 28rpx;
  background: #23C890;
  opacity: 1;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
}

.active-item {
  background-color: #fff;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: bold;
  line-height: 2.1;
  color: #212121;
}

.category-right {
  flex: 1;
  height: 100%;
}

.category-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, 190rpx);
}

.category-title {
  text-align: center;
  width: 525rpx;
  height: 67rpx;
  line-height: 67rpx;
  text-align: left;
  margin-left: 14rpx;
  border-bottom: 0.5rpx solid #BFBFBF;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  opacity: 1;
  margin-top: 20rpx;
}

.content-item {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  text-align: center;
  font-size: 30rpx;
}

.content-item image {
  width: 150rpx;
  height: 150rpx;
}

.content-item .mingiz {
  height: 33rpx;
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: bold;
  line-height: 24rpx;
  color: #333333;
  opacity: 1;
  margin-top: 21rpx;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 轮播 */
.lunbo {
  width: 486rpx;
  height: 196rpx;
  border: 1rpx solid #707070;
  opacity: 1;
  border-radius: 16rpx;
  margin-left:32rpx;
  margin-bottom:67rpx;
}
.lunbo .fuli_lunbo{
  height:100%;
  width:100%;
}
.lunbo .shu_tu{
  height:100%;
  width:100%;
}