点击tabs滚动到指定位置 模板

<template>
  <view class="container">
    <view style="position: fixed; z-index: 99; background-color: #fff; width: 100%;">
      <view><uni-status-bar></uni-status-bar></view>
      <view class="search-box flex-cn" @click="backHome">
        <view class="navbar-left flex-cn" style="flex: 1">
          <view
            style="width: 100rpx; text-align: center"
            class="qh-rt-single qh-rt-zuo-zuo navbar-back-icon"
          ></view>
        </view>
        <view
          style="
            height: 80rpx;
            line-height: 80rpx;
            font-size: 36rpx;
            font-family: '.PingFang SC, PingFang SC';
            display: flex;
            justify-content: center;
            align-content: center;
            flex: 1;
            color: #000;
            font-weight: 600;
          "
        >
          供应商申请
        </view>
        <view style="width: 320rpx; flex: 1"></view>
      </view>
      <view class="tabs">
        <view
          v-for="(tab, index) in tabs"
          :key="index"
          class="tab"
          :class="{ active: activeTab === tab.name }"
          @click="scrollToSection(tab.name, index)"
        >
          {
   
   { tab.name }}
        </view>
      </view>
    </view>

    <view style="padding-top: 160rpx;"> <!-- 确保内容不被固定定位元素遮挡 -->
      <scroll-view class="content" scroll-y scroll-with-animation :scroll-into-view="currentView">
        <block v-for="(tab, index) in tabs" :key="index">
          <view :id="`section-${index}`" class="section">
            <view class="section-title">
              <text class="line"></text>
              <text>{
   
   { tab.name }}</text>
            </view>
            <view class="description">{
   
   { tab.description }}</view>

            <view v-if="tab.name === '基础信息'"  class="scroll_content" >
              基础信息
            </view>

            <view v-if="tab.name === '优势信息'" class="scroll_content">
              优势信息
            </view>

            <view v-if="tab.name === '证照信息'" class="scroll_content">
              证照信息
            </view>
          </view>
        </block>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: "基础信息",
      currentView: "",
      tabs: [
        {
          index: 1,
          name: "基础信息",
          description: "请上传最新营业执照,并确保证件在有效期内,图像清晰完整"
        },
        {
          index: 2,
          name: "优势信息",
          description: "优势信息内容"
        },
        {
          index: 3,
          name: "证照信息",
          description: "证照信息内容"
        }
      ]
    };
  },
  methods: {
    scrollToSection(tabName, index) {
      this.activeTab = tabName;
      this.currentView = `section-${index}`;
      // 延迟设置以确保滚动位置正确
      setTimeout(() => {
        const query = uni.createSelectorQuery().in(this);
        query.select(`#section-${index}`).boundingClientRect();
        query.selectViewport().scrollOffset();
        query.exec((res) => {
          const sectionRect = res[0];
          const scrollOffset = res[1].scrollTop;
          const fixedHeight = 200; // 固定定位元素的高度
          const titleHeight = 80; // 标题的高度(根据实际情况调整)
          const scrollToPosition = sectionRect.top + scrollOffset - fixedHeight - titleHeight;
          uni.pageScrollTo({
            scrollTop: scrollToPosition,
            duration: 300
          });
        });
      }, 100);
    },
    backHome() {
      uni.navigateBack();
    }
  }
};
</script>

<style scoped>
.scroll_content{
  height: 1000rpx; border: 1px solid red;margin-top: 10px;

}
.container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

.tabs {
  display: flex;
  justify-content: space-around;
  border-bottom: 2px solid #e0e0e0;
  background-color: #fff;
  z-index: 1000;
  overflow-x: auto;
  white-space: nowrap;
}

.tab {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  color: #333;
  display: inline-block;
}

.tab.active {
  color: #00b050;
  font-weight: bold;
  border-bottom: 2px solid #00b050;
}

.content {
  height: calc(100vh - 200px); /* 确保 content 的高度正确 */
  overflow-y: auto;
}

.section {
  margin-bottom: 20px;
}

.section-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  margin-bottom: 10px;
}

.section-title .line {
  width: 5px;
  height: 18px;
  background-color: #00b050;
  margin-right: 8px;
}

.description {
  font-size: 14px;
  color: #333;
  background-color: #f0f9f4;
  padding: 10px;
  border-radius: 4px;
}
</style>

猜你喜欢

转载自blog.csdn.net/qq_44759522/article/details/139649568