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> <view class="cen"> 二级标题view>  <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] + heightthis.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
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！