微信小程序商城分類滾動列表錨點(左菜單右列表)

1、TestScroll.wxml

<view class="content-box">
  <!-- 左側分類 -->
  <scroll-view scroll-y scroll-with-animation class="left" style="width:245rpx;height:100%;background: #f2f2f2;" scroll-into-view='{{leftId}}'>
    <view id='left{{index}}' class="left-item {{activeKey===index?'active':''}}" wx:for="{{navData}}" data-index='{{index}}' wx:key='id' bindtap="onChange">
      <text class='name'>{{item.name}}</text>
    </view>
  </scroll-view>
  <!-- 滾動列表 -->
  <scroll-view class="right" scroll-y scroll-with-animation scroll-into-view="{{selectedId}}" bindscroll="changeScroll" style='height:100%;'>
    <!-- 每個分類 -->
    <view class="item subtitle" wx:for="{{goodslist}}" wx:key="id" id='type{{index}}'>
      <!-- 分類標題 -->
      <view class="type">【{{item.name}}】</view>
      <!-- 分類下的商品 -->
      <view class="item-list">
        <navigator class="list-item" wx:for="{{item.list}}" wx:for-item='key' wx:key="id">
          <!-- <image style="width: 100%; height: 180rpx;" src="{{key.imgurl}}" /> -->
          <view class="item-name">{{key.goods_name}}</view>
        </navigator>
      </view>
      <view wx:if="{{item.list.length===0}}" class="nodata">
        暫無商品
      </view>
    </view>
  </scroll-view>
</view>

2、TestScroll.wxss

.content-box {
  width: 100%;
  height: calc(100% - 108rpx);
  overflow-y: hidden;
  display: flex;
}
.content-box .left {
  height: 100%;
  overflow-y: scroll;
}
.content-box .left .left-item {
  width: 100%;
  padding: 20rpx;
  box-sizing: border-box;
}
.content-box .left .left-item .name {
  word-wrap: break-word;
  font-size: 28rpx;
  color: #323233;
}
.content-box .left .active {
  border-left: 6rpx #ee0a24 solid;
  background-color: #fff;
}
.content-box .right {
  flex: 1;
}
.content-box .right .item {
  position: relative;
  padding: 20rpx;
  background: #fff;
}
.content-box .right .item .type {
  padding: 5rpx;
  position: sticky;
  top: 0;
  background-color: aliceblue;
  z-index: 1;
}
.content-box .right .item .item-list {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20rpx;
  text-align: center;
}
.content-box .right .item .item-list .item-name {
  color: #3a3a3a;
  font-size: 26rpx;
  margin-top: 10rpx;
}
.content-box .right .item .nodata {
  padding: 20rpx;
  color: #ccc;
}

3、TestScroll.js

 

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    // 分類列表
    navData: [
      { name: "奔馳C" },
      { name: "奔馳E" },
      { name: "雷克薩斯E200" },
      { name: "雷克薩斯E300" },
      { name: "寶馬3系" },
      { name: "寶馬5系" },
      { name: "奧迪Q5" },
      { name: "奧迪A6" },
      { name: "奧迪A8" },
      { name: "凱迪拉克CT4" },
      { name: "凱迪拉克CT5" },
      { name: "凱迪拉克CT6" },
      { name: "凱美瑞" },
      { name: "亞洲龍" },
      { name: "雅閣" },
      { name: "英詩派" },
    ],
    // 商品列表
    goodslist: [
      { 
        name: "奔馳C",
        list: [
          { goods_name: "來來來1" },
          { goods_name: "來來來2" },
          { goods_name: "來來來3" },
          { goods_name: "來來來4" },
          { goods_name: "來來來5" },
        ]
      },
      { 
        name: "奔馳E",
        list: [
          { goods_name: "來來來1" },
          { goods_name: "來來來2" },
          { goods_name: "來來來3" },
        ]
      },
      { 
        name: "雷克薩斯E200",
        list: [
          { goods_name: "來來來1" },
          { goods_name: "來來來2" },
          { goods_name: "來來來3" },
          { goods_name: "來來來4" },
          { goods_name: "來來來5" },
          { goods_name: "來來來6" },
          { goods_name: "來來來7" },
        ]
      },
      { 
        name: "雷克薩斯E300",
        list: [
          { goods_name: "來來來1" },
          { goods_name: "來來來2" },
          { goods_name: "來來來3" },
        ]
      },
      { 
        name: "寶馬3系",
        list: [
          { goods_name: "來來來1" },
          { goods_name: "來來來2" },
          { goods_name: "來來來3" },
          { goods_name: "來來來4" },
        ]
      },
      { 
        name: "寶馬5系",
        list: [
          { goods_name: "來來來1" },
          { goods_name: "來來來2" },
          { goods_name: "來來來3" },
        ]
      },
      { 
        name: "奧迪Q5",
        list: [
          { goods_name: "來來來1" },
          { goods_name: "來來來2" },
          { goods_name: "來來來3" },
          { goods_name: "來來來4" },
          { goods_name: "來來來5" },
          { goods_name: "來來來6" },
          { goods_name: "來來來7" },
          { goods_name: "來來來8" },
          { goods_name: "來來來9" },
          { goods_name: "來來來10" },
        ]
      },
      { 
        name: "奧迪A6",
        list: [
          { goods_name: "來來來1" },
          { goods_name: "來來來2" },
          { goods_name: "來來來3" },
        ]
      },
      { 
        name: "奧迪A8",
        list: [
          { goods_name: "來來來1" },
          { goods_name: "來來來2" },
          { goods_name: "來來來3" },
        ]
      },
      { 
        name: "凱迪拉克CT4",
        list: [
          { goods_name: "來來來1" },
          { goods_name: "來來來2" },
          { goods_name: "來來來3" },
          { goods_name: "來來來4" },
          { goods_name: "來來來5" },
          { goods_name: "來來來6" },
          { goods_name: "來來來7" },
          { goods_name: "來來來8" },
        ]
      },
      { 
        name: "凱迪拉克CT5",
        list: [
          { goods_name: "來來來1" },
          { goods_name: "來來來2" },
          { goods_name: "來來來3" },
        ]
      },
      { 
        name: "凱迪拉克CT6",
        list: [
          { goods_name: "來來來1" },
          { goods_name: "來來來2" },
          { goods_name: "來來來3" },
          { goods_name: "來來來4" },
          { goods_name: "來來來5" },
          { goods_name: "來來來6" },
          { goods_name: "來來來7" },
          { goods_name: "來來來8" },
          { goods_name: "來來來9" },
          { goods_name: "來來來10" },
          { goods_name: "來來來11" },
          { goods_name: "來來來12" },
          { goods_name: "來來來13" },
          { goods_name: "來來來14" }
        ]
      },
      { 
        name: "凱美瑞",
        list: [
          { goods_name: "來來來1" },
          { goods_name: "來來來2" },
          { goods_name: "來來來3" },
        ]
      },
      { 
        name: "亞洲龍",
        list: [
          { goods_name: "來來來1" },
          { goods_name: "來來來2" },
          { goods_name: "來來來3" },
          { goods_name: "來來來4" },
          { goods_name: "來來來5" },
          { goods_name: "來來來6" },
          { goods_name: "來來來7" },
          { goods_name: "來來來8" },
          { goods_name: "來來來9" },
          { goods_name: "來來來10" }
        ]
      },
      { 
        name: "雅閣",
        list: [
          { goods_name: "來來來1" },
          { goods_name: "來來來2" },
          { goods_name: "來來來3" },
        ]
      },
      { 
        name: "英詩派",
        list: [
          { goods_name: "來來來1" },
          { goods_name: "來來來2" },
          { goods_name: "來來來3" },
        ]
      },
    ],
    // 左側分類選中項 分類列表數組的下標
    activeKey: 0,
    // 計算出的錨點的位置
    heightList: [],
    // 右側子元素的錨點
    selectedId: 'type0',
    // 左側分類的錨點
    leftId: 'left0',
  },
  onShow() {
    this.selectHeight()
  },
  // 計算右側每個錨點的高距離頂部的高
  selectHeight() {
    var _that = this;
    var list = [];
    const query = wx.createSelectorQuery();
    query.selectAll('.subtitle').boundingClientRect()
    query.exec((res) => {
      console.log("res-----",res[0]);
      res[0].forEach((item) => {
        list.push(item.bottom)
      })
      _that.setData({ heightList: list })
      console.log('heightList-------',list);
    })
  },
  changeScroll(e) {
    // 獲取距離頂部的距離
    let scrollTop = e.detail.scrollTop;
    // 當前分類選中項,分類列表下標
    let { activeKey, heightList } = this.data;
    console.log('scrollTop-------',scrollTop);
    // 防止超出分類              判斷滾動距離是否超過當前分類距離頂部高度
    if (activeKey + 1 < heightList.length && scrollTop >= heightList[activeKey]) {
      this.setData({
        // 左側分類選中項改變
        activeKey: activeKey + 1,
        // 左側錨點對應位置
        leftId: `left${activeKey + 1}`
      })
    }
    if (activeKey - 1 >= 0 && scrollTop < heightList[activeKey - 1]) {
      this.setData({
        activeKey: activeKey - 1,
        leftId: `left${activeKey - 1}`
      })
    }
  },
  onChange(event) {
    let index = event.currentTarget.dataset.index
    this.setData({
      activeKey: index,
      selectedId: "type" + index
    });
  },
})