微信小程序实现左右联动分类锚点列表

css

/* pages/home/home.wxss */

@import "item.wxss";
.red{
  color: red;
  width: 200px;
  height: 100px;
  background-color: hotpink;
}

.green{
  color: green;
}

html

<view class="contain">
	<view id="header">
		<!-- 这是我写的头部组件，可以忽略 -->
		<header title="Bingo" />
	</view>
	<view id="searchBox" class="searchBox">
		<view class="search">
			<image src=""></image>
			<input placeholder="搜索商品"></input>
			<image src=""></image>
		</view>
		<button class="search-button">搜索</button>
	</view>
	<view class='main'>
		<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: 1100rpx" bindscroll="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'>
									<!-- 图片出不来就用灰色块代替了 -->
									<!-- <image src='{{item.goodsUrl}}'></image> -->
									<image src=''></image>
								</view>
								<view class='listText'>
									<text>{{item.goodsName}}</text>
									<text class='money'>¥{{item.shopPrice}}</text>
									<view>
										<text>已售{{item.saleNum}}</text>
										<image class="add-image" src="../../images/goods/add.svg"></image>
									</view>
								</view>
							</view>
						</block>
					</view>
				</block>
			</scroll-view>
		</view>
	</view>
</view>

js

Page({

  data: {
    // 数据列表
    dataList: [
      {
        id: "01",
        navTitle: "活动",
        goodsList: [{
          id: 1,
          goodsUrl: "../../images/goods/pencil01.jpg",
          goodsName: "晨光优品中性笔",
          typeList: ['粉红色', '淡蓝色', '淡黄色'],
          shopPrice: 3,
          saleNum: 20,
        },
        {
          id: 2,
          goodsUrl: "../../images/goods/pencil02.jpg",
          goodsName: "得力彩色中性笔",
          typeList: ['白色', '橘色'],
          shopPrice: 5.2,
          saleNum: 20,
        },
        {
          id: 3,
          goodsUrl: "../../images/goods/pencil03.jpg",
          goodsName: "得力糖果中性笔",
          shopPrice: 12,
          saleNum: 20,
        },
        {
          id: 4,
          goodsUrl: "../../images/goods/pencil04.jpg",
          goodsName: "按压式花边修正带",
          shopPrice: 6.9,
          saleNum: 20,
        },
        {
          id: 5,
          goodsUrl: "../../images/goods/pencil05.jpg",
          goodsName: "得力文具便利贴",
          shopPrice: 4,
          saleNum: 20,
        }
        ],
      },
      {
        id: "02",
        navTitle: "新品",
        goodsList: [{
          id: 21,
          goodsUrl: "../../images/goods/pencil01.jpg",
          goodsName: "晨光优品中性笔",
          shopPrice: 3,
          saleNum: 20,
        },
        {
          goodsUrl: "../../images/goods/pencil02.jpg",
          goodsName: "得力彩色中性笔",
          shopPrice: 5.2,
          saleNum: 20,
          id: 22,
        },
        {
          id: 4,
          goodsUrl: "../../images/goods/pencil04.jpg",
          goodsName: "按压式花边修正带",
          shopPrice: 6.9,
          saleNum: 20,
        },
        {
          id: 5,
          goodsUrl: "../../images/goods/pencil05.jpg",
          goodsName: "得力文具便利贴",
          shopPrice: 4,
          saleNum: 20,
        }
        ],
      },
      {
        id: "03",
        navTitle: "推荐",
        goodsList: [{
          goodsUrl: "../../images/goods/pencil01.jpg",
          goodsName: "晨光优品中性笔",
          shopPrice: 3,
          saleNum: 20,
          id: 31,
        },
        {
          goodsUrl: "../../images/goods/pencil02.jpg",
          goodsName: "得力彩色中性笔",
          shopPrice: 5.2,
          saleNum: 20,
          id: 32,
        },
        {
          id: 4,
          goodsUrl: "../../images/goods/pencil04.jpg",
          goodsName: "按压式花边修正带",
          shopPrice: 6.9,
          saleNum: 20,
        },
        {
          id: 5,
          goodsUrl: "../../images/goods/pencil05.jpg",
          goodsName: "得力文具便利贴",
          shopPrice: 4,
          saleNum: 20,
        },
        ],
      },
      {
        id: "04",
        navTitle: "晨光系列",
        goodsList: [{
          goodsUrl: "../../images/goods/pencil01.jpg",
          goodsName: "晨光优品中性笔",
          shopPrice: 3,
          saleNum: 20,
          id: 41,
        },
        {
          id: 4,
          goodsUrl: "../../images/goods/pencil04.jpg",
          goodsName: "晨光按压式花边修正带",
          shopPrice: 6.9,
          saleNum: 20,
        },
        {
          id: 5,
          goodsUrl: "../../images/goods/pencil05.jpg",
          goodsName: "晨光文具便利贴",
          shopPrice: 4,
          saleNum: 20,
        },
        ],
      },
      {
        id: "05",
        navTitle: "文具专区",
        goodsList: [{
          goodsUrl: "../../images/goods/pencil01.jpg",
          goodsName: "晨光优品中性笔(美)",
          shopPrice: 3,
          saleNum: 20,
          id: 61,
        },
        {
          goodsUrl: "../../images/goods/pencil02.jpg",
          goodsName: "得力彩色中性笔",
          shopPrice: 5.2,
          saleNum: 20,
          id: 62,
        },
        ],
      },
      {
        id: "06",
        navTitle: "精品专区",
        goodsList: [{
          goodsUrl: "../../images/goods/pencil01.jpg",
          goodsName: "晨光优品中性笔",
          shopPrice: 3,
          saleNum: 20,
          id: 1,
        },
        {
          goodsUrl: "../../images/goods/pencil02.jpg",
          goodsName: "得力彩色中性笔",
          shopPrice: 5.2,
          saleNum: 20,
          id: 2,
        },
        ],
      },
    ],
    searchHeight: 0,   // 搜索框高度
    currentActiveIndex: 0,   // 当前菜单索引
    isClickMenu: false, // 是否点击菜单
    proListToTop: [],  // 记录每一个类型的列表道顶部的距离
  },

  onLoad: function (options) {
    this.getEleHeight();
  },

  getEleHeight() {
    var searchHeight, proListToTop = [];

    // 搜索框所占据的高度，在后续滑动时需要减掉该高度
    wx.createSelectorQuery().select("#searchBox").boundingClientRect(res => {
      searchHeight = res.height
      // 回调函数是异步的，所以需要在方法里面更新数据
      this.setData({
        searchHeight: searchHeight,
      })
    }).exec()

    // 记录每一个类型的列表道顶部的距离
    wx.createSelectorQuery().selectAll('.itemTitle').boundingClientRect((rects) => {
      rects.forEach((rect) => {
        proListToTop.push(rect.top.toFixed(2) - this.data.searchHeight);
      })
      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]) {
          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
    })
  },

})