微信小程序左右联动

好记性不如烂笔头

wxml

<view class="container">
    <view class="category-left">
        <scroll-view scroll-y="true" style="height:100%">
            <block wx:for="{{category}}" wx:key="id">
                <view class="catgegory-item {{activeId == item.id?'active-item':''}}" data-id="{{item.id}}" bindtap="clickItem">{{item.name}}
                    <view wx:if="{{activeId == item.id}}" class="lvtiao"></view>
                </view>
            </block>
        </scroll-view>
    </view>

    <view class="category-right">
        <scroll-view scroll-y="true" style="height:100%;background-color: #fff;" scroll-into-view="{{toView}}" scroll-with-animation="ture" bindscroll="scroll">
            <view style="height:24rpx;"></view>
            <view class="lunbo">
                <swiper class="fuli_lunbo" circular="{{true}}" indicator-dots="{{false}}" autoplay="{{true}}" duration="{{1000}}" interval="{{8000}}">
            <swiper-item wx:for="{{qing_list}}" wx:key="key">
                <image class="shu_tu" src="../../images/baoxiu.png"></image>
            </swiper-item>
        </swiper>
            </view>
            <view class="categoty-detail">
                <block wx:for="{{content}}" wx:key="id">
                    <view class="catefory-main">
                        <view class="category-title" id="{{item.id}}">{{item.title}}</view>
                        <view class="category-content">
                            <view class="content-item" wx:for="{{item.options}}" wx:for-item="i" wx:key="id">
                                <image src="{{i.src}}"></image>
                                <view class="mingiz">{{i.text}}</view>
                            </view>
                        </view>
                    </view>
                </block>
            </view>
        </scroll-view>
    </view>
</view>

　　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<arr.length;i++) {
      if (scrollHeight >= 0 && scrollHeight < arr[0]){
        index = 0;
      }else if(scrollHeight >= arr[i-1] && scrollHeight < arr[i]){
        index = i;
      }
    }
    return index+1;
  }
})

　　

wxss

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

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

.catgegory-item {
   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;
   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;
   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 {
   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 {
   486rpx;
  height: 196rpx;
  border: 1rpx solid #707070;
  opacity: 1;
  border-radius: 16rpx;
  margin-left:32rpx;
  margin-bottom:67rpx;
}
.lunbo .fuli_lunbo{
  height:100%;
  100%;
}
.lunbo .shu_tu{
  height:100%;
  100%;
}