微信小程序——左右列表互选

wxml

<view class="linkage">
<!-- 左侧列表 -->
    <view class='left'>
      <scroll-view scroll-y="true" class="leftScroll" scroll-into-view="true" scroll-with-animation="true">
        <block wx:for="{{dataList}}" wx:for-list="item" wx:for-index="index" wx:key="index">
          <view class="{{currentActiveIndex == index?'leftActive':'leftInactive'}}" data-index="{{index}}" data-id='{{item.id}}' bindtap='changeLeftMenu'>
            <text>{{item.navTitle}}</text>
          </view>
        </block>
      </scroll-view>
    </view>
<!-- 右侧列表 -->
    <view class='right'>
      <!-- 
          1. scroll-into-view="{{'inToview'+rigId}}"和下面的id="{{'inToview'+item.id}}"对应
          2. rigId为变量，设置rigId的值，列表会滑动到对应的id
          3. 注意：scroll-into-view的属性不能以数字开头
      -->
      <scroll-view scroll-y="true" style="height:100vh;" bind:scroll="scroll" scroll-top="{{scrollTop}}" scroll-into-view="{{'inToview'+rigId}}" scroll-with-animation="true">

        <block wx:for="{{dataList}}" wx:for-list="item" wx:for-index="index" wx:key="index">

          <view wx:if="{{item.goodsList.length != 0}}" class='itemTitle' id="{{'inToview'+item.id}}">{{item.navTitle}}</view>

          <view class='listItem' data-id='{{item.id}}'>
            <block wx:for="{{item.goodsList}}" wx:for-index="idx" wx:key="idx">
              <view class='listItemSub' data-text="{{}}">
                <view class='img'>
                </view>
                <view class='listText'>
                  <text>{{item.goodsName}}</text>
                  <text class='money'>¥{{item.shopPrice}}</text>
                  <view>
                    <text>已售{{item.saleNum}}</text>
                  </view>
                </view>
              </view>
            </block>
          </view>
        </block>
      </scroll-view>
    </view>
</view>

wxss

.left {
  width: 200rpx;
  height: 100vh;
  float: left;
  background-color: rgb(243, 238, 238);
}

.left view {
  padding: 30rpx 20rpx;
  text-align: center;
  overflow: hidden; /*超出部分隐藏*/
  white-space: nowrap; /*禁止换行*/
  text-overflow: ellipsis; /*省略号*/
}
.leftActive{
background-color: white;
}
.leftInactive{
  background-color: rgb(243, 238, 238);
}

.right {
  width: 530rpx;
  height: 100vh;
  float: right;
  padding-left: 20rpx;
}

.itemTitle{
  width: 100%;
  padding:15rpx 0;
  background-color: white;
  font-size: 40rpx;
  font-weight: 800;
  margin-top: 40rpx;
}
.itemTitle:first-of-type{
  margin-top: 0;
}
.listItemSub{
  padding: 25rpx 0;
  display: flex;
}
.img{
  width: 160rpx;
  height: 160rpx;
  background-color: black;
}
.listText{
  padding: 5rpx 0 5rpx 20rpx;
  display: flex;
  flex-direction:column;
  justify-content:space-between;
}

js

Page({
 
  data: {
    // 数据列表
    dataList: [
      {
        id: "01",
        navTitle: "活动",
        goodsList: [{
          id: 1,
          goodsName: "晨光优品中性笔",
          typeList: ['粉红色', '淡蓝色', '淡黄色'],
          shopPrice: 3,
          saleNum: 20,
        },
        {
          id: 2,
          goodsName: "得力彩色中性笔",
          typeList: ['白色', '橘色'],
          shopPrice: 5.2,
          saleNum: 20,
        },
        {
          id: 3,
          goodsName: "得力糖果中性笔",
          shopPrice: 12,
          saleNum: 20,
        },
        {
          id: 4,
          goodsName: "按压式花边修正带",
          shopPrice: 6.9,
          saleNum: 20,
        },
        {
          id: 5,
          goodsName: "得力文具便利贴",
          shopPrice: 4,
          saleNum: 20,
        }
        ],
      },
      {
        id: "02",
        navTitle: "新品",
        goodsList: [{
          id: 21,
          goodsName: "晨光优品中性笔",
          shopPrice: 3,
          saleNum: 20,
        },
        {
          goodsName: "得力彩色中性笔",
          shopPrice: 5.2,
          saleNum: 20,
          id: 22,
        },
        {
          id: 4,
          goodsName: "按压式花边修正带",
          shopPrice: 6.9,
          saleNum: 20,
        },
        {
          id: 5,
          goodsName: "得力文具便利贴",
          shopPrice: 4,
          saleNum: 20,
        }
        ],
      },
      {
        id: "03",
        navTitle: "推荐",
        goodsList: [{
          goodsName: "晨光优品中性笔",
          shopPrice: 3,
          saleNum: 20,
          id: 31,
        },
        {
          goodsName: "得力彩色中性笔",
          shopPrice: 5.2,
          saleNum: 20,
          id: 32,
        },
        {
          id: 4,
          goodsName: "按压式花边修正带",
          shopPrice: 6.9,
          saleNum: 20,
        },
        {
          id: 5,
          goodsName: "得力文具便利贴",
          shopPrice: 4,
          saleNum: 20,
        },
        ],
      },
      {
        id: "04",
        navTitle: "晨光系列",
        goodsList: [{
          goodsName: "晨光优品中性笔",
          shopPrice: 3,
          saleNum: 20,
          id: 41,
        },
        {
          id: 4,
          goodsName: "晨光按压式花边修正带",
          shopPrice: 6.9,
          saleNum: 20,
        },
        {
          id: 5,
          goodsName: "晨光文具便利贴",
          shopPrice: 4,
          saleNum: 20,
        },
        ],
      },
      {
        id: "05",
        navTitle: "文具专区",
        goodsList: [{
          goodsName: "晨光优品中性笔(美)",
        },
        {
          goodsName: "得力彩色中性笔",
        },
        ],
      },
      {
        id: "06",
        navTitle: "精品专区",
        goodsList: [{
          goodsName: "晨光优品中性笔",
          shopPrice: 3,
          saleNum: 20,
          id: 1,
        },
        {
          goodsName: "得力彩色中性笔",
          shopPrice: 5.2,
          saleNum: 20,
          id: 2,
        },
        ],
      },
    ],
    currentActiveIndex: 0,   // 当前菜单索引
    isClickMenu: false, // 是否点击菜单
    proListToTop: [],  // 记录每一个类型的列表道顶部的距离
  },
 
  onLoad: function (options) {
    this.getEleHeight();
  }, 
  getEleHeight() {
    var proListToTop = [];
    // 记录每一个类型的列表道顶部的距离
    wx.createSelectorQuery().selectAll('.itemTitle').boundingClientRect((rects) => {
      rects.forEach((rect) => {
        proListToTop.push(rect.top.toFixed(2));
      })
      this.setData({
        proListToTop: proListToTop,
      })
    }).exec()
 
  },
  //滚动触发
  scroll: function (e) {
    // 若滑动是点击菜单触发的，则不进行判断；
    if (!this.data.isClickMenu) {
      // 获取滚动的高度
      var scrollTop = e.detail.scrollTop;
      var proListToTop = this.data.proListToTop;
      var currentActiveIndex;
      for (let i = 0; i < proListToTop.length; i++) {
        // 根据滑动距离判断当前处于哪个菜单索引
        if (e.detail.scrollTop < proListToTop[i] && i !== 0 && e.detail.scrollTop > proListToTop[i - 1]) {
          console.log(i);
          this.setData({
            currentActiveIndex: i - 1,
          })
        }
      }
    }
    // 将点击菜单状态还原为false
    this.setData({
      isClickMenu: false,
    })
  },
 
  //点击左边菜单事件
  changeLeftMenu: function (e) {
    // 当前点击的导航对应的右列表id
    var rigId = e.currentTarget.dataset.id;
    // 当前导航索引
    var index = e.currentTarget.dataset.index;
    // 点击当前导航索引，不作处理
    if (this.data.currentActiveIndex === index) {
      return;
    }
    this.setData({
      rigId: rigId,
      // 设置选中id
      currentActiveIndex: index,
      // 是否点击
      isClickMenu: true
    })
  },
 
})

json

{
  "navigationBarTitleText": "ceshi",
  "usingComponents": {},
"disableScroll：": true
}