<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>
点击tabs滚动到指定位置 模板
猜你喜欢
转载自blog.csdn.net/qq_44759522/article/details/139649568
今日推荐
周排行