uniapp左侧点击右侧滑动到对应的高度,右侧滑动左侧自动高亮,解决安卓频繁触发滚动到底事件不会执行情况,scrolltolower偶尔执行

html结构

 <view class="content">
 //左侧
      <view class="left" >
        <view class="left_type" v-for="(item, index) in leftList" :key="index">
          <view @click="leftCur(index, item.dirId)" :class="
            index == activeIndex
              ? 'left_type_item left_active'
              : 'left_type_item'
          ">
            <text :class="index == activeIndex ? 'left_bor' : ''"></text>
            <text :class="index == activeIndex ? 'left_active_text' : ''">左侧标题{{index}}</text>
          </view>
        </view>
      </view>
      <scroll-view scroll-y class="right" :style="'height:calc( 100vh - ' + barHeight + 'px)'"
        :scroll-with-animation="true" @scroll="scroll" :scroll-into-view="scrollId" @scrolltolower="scrolltolower"  lower-threshold="150" enhanced   :bounces="false">
        <view class="scroll-detail" v-for="(item, index) in rightList" :key="index" :id="'box' + item.dirId">
          <view class="group_title">
            <view class="l"> </view>&emsp;
            <view class="cen"> 二级标题</view> &emsp;
            <view class="r"> </view>
          </view>
          <view class="right_type_item" v-for="(ite, ind) in item.groups" :key="ind" >
            <view class="title">
              <text>{{ ite.groupName }}三级内容</text>           
              </view>
          </view>
        </view>
      </scroll-view>
    </view>

下边是script部分

 // 获取数据
    async getTeamData() {
      const res = await this.api.getTeamApi();
      this.leftList = res.data.category;
      this.rightList = res.data.dirGroups;
      this.heightArr = [];
		// 数据渲染好以后开始读取内容的高度
      this.$nextTick(function () {
        let query = wx.createSelectorQuery();
        query.selectAll('.scroll-detail').boundingClientRect((rect) => {
          rect.forEach(ele => {
            this.calculateHeight(ele.height);
          })
        }).exec();
      });
//内容高度组成的数组
 calculateHeight(height) {
      if (this.heightArr.length === 0) {
        this.heightArr.push(height)
      } else {
        height = this.heightArr[this.heightArr.length - 1] + height
        this.heightArr.push(height);
      }
    },
    //根据滚动高度判断当前高亮
    calculateIndex(arr, scrollHeight) {
      let index = "";
      for (let i = 0; i < arr.length; i++) {
        if (scrollHeight >= 0 && parseInt(scrollHeight) < parseInt(arr[0])) {
          index = 0;
        } else if (
          parseInt(scrollHeight) >= parseInt(arr[i - 1]) &&
          parseInt(scrollHeight) <= arr[i] - 3
        ) {
          index = i;
        }
      return index;
    },
    //滚动事件
    scroll(e) {
      let scrollHeight = e.detail.scrollTop;
      if (this.isScrollBottom) {
        this.bottomHeight = scrollHeight;
        this.isScrollBottom = false;
      }
      let isScrollBottom = this.bottomHeight - scrollHeight;
      // 给一个20px的缓冲区
      if (this.bottomHeight > 0 && isScrollBottom < 20) {
        return;
      }
      let index = this.calculateIndex(this.heightArr, scrollHeight);
      this.activeIndex = index;
    },
    // 滚动到底部
    scrolltolower(e) {
      console.log("滚动到底部触发", this.isScrollBottom);
      this.isScrollBottom = true;
      this.activeIndex = this.leftList.length - 1;
    },
    // 左侧高亮
    leftCur(index, dirId) {
      this.activeIndex = index;
      this.scrollId = `box${dirId}`;
    },

css

.group_title {
  display: flex;
  text-align: center;
  color: #999;
  justify-content: space-between;
  font-family: PingFangSC-Thin, PingFang SC;
  width: 244rpx;
  font-size: 28rpx;
  text-align: center;
  padding: 32rpx 10rpx 0rpx 0;
  margin: 0 auto;
  /* background-color: pink; */
  /* color: #cdcdcd; */
}

.cen {
  /* padding: 0 26rpx; */
  /* margin: 0 20rpx; */
}

.group_title .l,
.group_title .r {
  width: 46rpx;
  height: 20rpx;
  border-bottom: 1rpx solid #999;
}

.content {
  background-color: #f5f5f5;
  display: flex;
  width: 750rpx;
  /* overflow-y: auto; */
}

.left {
  width: 192rpx;
  font-family: PingFangSC-Medium, PingFang SC;
}

.left_active {
  background-color: #fff;
}

.left_bor {
  width: 6rpx;
  height: 28rpx;
  background-color: #fff;
  display: inline-block;
  margin-right: 10rpx;
  border-radius: 4rpx;
}

.left_active_bor {
  background-color: #ea4336;
  display: inline-block;
  margin-right: 10rpx;
  border-radius: 4rpx;

  width: 6rpx;
  height: 28rpx;
}

.left_active_text {
  color: #ea4336;
  /* background-color: pink; */
  /* margin-left: 10rpx; */
  font-weight: 500;
  font-family: PingFangSC-Regular, PingFang SC;
}

.left_type_item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 192rpx;
  box-sizing: border-box;
  height: 102rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #666666;
  /* margin-top: 20rpx; */
  /* line-height: 100rpx;
  text-align: center; */
}

.right {
  flex: 1;
  height: calc(100vh);
  overflow-y: auto;
}

.right_type_item {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.05);
  border-radius: 2rpx;
  background: #f1f3f5;
  box-sizing: border-box;
  background-color: #fff;
  margin-top: 16rpx;
  padding: 0rpx 0 32rpx 22rpx;
}

.title {
  display: flex;
  height: 88rpx;
  line-height: 88rpx;
  justify-content: space-between;
  border-bottom: 1rpx solid #f5f5f5;
  margin: 0rpx 0 rpx 24rpx 32rpx;
}

.title text {
  font-size: 32rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 540;
  color: #111111;
}

.title .info_icon {
  /* width: 150rpx; */
  padding-right: 46rpx;
  display: flex;
  font-size: 26rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #666666;
  line-height: 88rpx;
  position: relative;
  height: 88rpx;
}

.title .info_icon::after {
  content: "";
  position: absolute;
  right: 32rpx;
  top: 40rpx;
  width: 12rpx;
  height: 12rpx;
  border-left: 1rpx solid #666666;
  border-bottom: 1rpx solid #666666;
  transform: rotate(-135deg);
}

.team_box {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  margin: 0 22rpx 0 -12rpx;
  min-height: 40rpx;
}

.team_item {
  float: left;
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background-color: pink; */
  height: 150rpx;
  justify-content: center;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
}
.right_type_item{
height:400rpx
}