微信小程序scroll-view滑动点击跟随导航

微信小程序scroll-view滑动点击跟随导航：

<view class="demo">
    <!-- 导航 -->
    <view class="nav-list">
        <scroll-view scroll-x="{{true}}" scroll-with-animation="true" class="nav-scroll-view" scroll-left="{{scrollLeft}}" show-scrollbar="{{false}}">
            <view class="row">
                <view class="nav-item {{index == viewNavIndex && 'active'}}" wx:for="{{10}}" wx:key="index" bindtap="handleClickNav" data-nav="{{index}}">
                    列表{{index + 1}}
                </view>
            </view>
        </scroll-view>
    </view>
    <!-- 内容 -->
    <view class="list-wrapper">
        <scroll-view class="list-container" id="list-container" bindscroll="handleListScroll" bind:touchstart="handleTouchScrollView" scroll-x="{{true}}" scroll-into-view="scroll-item-{{clickedNavIndex}}" show-scrollbar="{{false}}" scroll-with-animation="{{true}}">
            <view class="content">
                <view class="list" wx:for="{{10}}" wx:key="index" id="scroll-item-{{index}}" style="background-color:{{colorString[index]}}">
                    <text class="list-item">{{item}}</text>
                </view>
            </view>
        </scroll-view>
    </view>
</view>

/* 防抖 */
function debounce(fn, interval) {
  let timer;
  let delay = interval || 500;
  return function () {
    let that = this;
    let args = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(function () {
      fn.apply(that, args);
    }, delay);
  };
}
// pages/demo/demo.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    isTouchScrollView: false, // 锁定
    clickedNavIndex: 0, // 点击index
    viewNavIndex: 0, // 锚点
    nodeInfoList: [], // 节点信息
    leftDistance: 0,
    scrollLeft: 0, // 左偏移
    contentScrollW: 0, // 导航总宽度
    nodeNavList: [], // 节点信息
    colorString: [], // 随机颜色(非必要)
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getData();
  },
  // 随机颜色
  getData() {
    var { row, colorString } = this.data;
    var ColorCharacter = [
      "0",
      "1",
      "2",
      "3",
      "4",
      "5",
      "6",
      "7",
      "8",
      "9",
      "A",
      "B",
      "C",
      "D",
      "E",
      "F",
    ];

    for (var i = 0; i < 10; i++) {
      var HomeNumber = "#";

      for (var j = 0; j < 6; j++) {
        var NumberRand = Math.floor(Math.random() * 16);
        HomeNumber += ColorCharacter[NumberRand];
      }
      colorString.push(HomeNumber); // 追加到colorString末尾
    }
    console.log(colorString);

    this.setData({
      colorString,
    });
  },

  // 初始化节点
  initNode() {
    const that = this;
    const query = wx.createSelectorQuery().in(this);
    query
      .select(".nav-scroll-view")
      .boundingClientRect((data) => {
        console.log(data);
        // 拿到 scroll-view 组件宽度
        this.data.contentScrollW = data.width;
      })
      .exec();
    query
      .selectAll(".nav-item")
      .boundingClientRect((data) => {
        console.log(data);
        that.setData({
          nodeNavList: data,
        });
      })
      .exec();
    query
      .selectAll("#list-container .list")
      .boundingClientRect((data) => {
        console.log(data);
        that.setData({
          nodeInfoList: data,
        });
      })
      .exec();
  },
  // nav 点击
  handleClickNav(e) {
    const that = this;
    const { nav } = e.currentTarget.dataset;
    console.log(nav);
    const { isTouchScrollView, clickedNavIndex } = this.data;
    if (!isTouchScrollView && clickedNavIndex == nav) return;
    // 锁定联动
    this.data.isTouchScrollView = false;
    // 解决clickedNavIndex相同触发更新失败
    if (clickedNavIndex == nav) {
      return;
      this.setData({
        clickedNavIndex: -1,
      });
    }
    wx.nextTick(() => {
      that.setData({
        clickedNavIndex: nav,
        viewNavIndex: nav,
        scrollLeft: that.getScrollLeft(nav),
      });
    });
  },
  // 滑动
  handleListScroll(e) {
    // console.log("e: ", e);
    const { isTouchScrollView, nodeInfoList, leftDistance } = this.data;
    if (!isTouchScrollView) return;
    this.scrollLeft = e.detail.scrollLeft;
    // console.log("scrollLeft: " + this.scrollLeft);
    let currentNavIndex = nodeInfoList
      .map((item, index) => ({ index, ...item }))
      .filter((item) => item.left <= this.scrollLeft + leftDistance)
      .sort((a, b) => b.left - a.left)[0].index;
    this.setData({
      viewNavIndex: currentNavIndex,
      scrollLeft: this.getScrollLeft(currentNavIndex),
    });
  },
  // 获取导航偏移
  getScrollLeft(index) {
    const { nodeNavList, contentScrollW } = this.data;
    const scrollLeft =
      nodeNavList[index].left -
      contentScrollW / 2 +
      nodeNavList[index].width / 2;
    return scrollLeft;
  },

  handleTouchScrollView() {
    this.data.isTouchScrollView = true;
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    this.initNode();
  },

});

.demo {
  .nav-list {
    display: flex;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    background-color: #fff;
    .row {
      display: flex;
    }
    .nav-item {
      padding: 25rpx 15rpx;
      font-size: 28rpx;
      text-align: center;
      white-space: nowrap;
      transition: transform 0.1s linear;
      &.active {
        color: #fb7d34;
        transform-origin: center center;
        transform: scale(1.1);
      }
      &:active {
        background-color: rgba(0, 0, 0, 0.1);
      }
    }
  }
  .list-wrapper {
    width: 100%;
    position: relative;
    .list-container {
      display: flex;
      width: 100%;
      .content {
        display: flex;
      }
      .list {
        flex: 0 0 750rpx;
        height: 300rpx;
      }
    }
  }
  ::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
  }
}