简历制作111
This commit is contained in:
@@ -90,6 +90,10 @@ const handleScrollToLower = () => {
|
|||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: calc(100% - var(--window-bottom));
|
height: calc(100% - var(--window-bottom));
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
/* H5环境安全区域适配 */
|
||||||
|
/* #ifdef H5 */
|
||||||
|
height: 100vh;
|
||||||
|
/* #endif */
|
||||||
}
|
}
|
||||||
.app-container {
|
.app-container {
|
||||||
// background-image: url('@/static/icon/background2.png');
|
// background-image: url('@/static/icon/background2.png');
|
||||||
@@ -140,7 +144,13 @@ const handleScrollToLower = () => {
|
|||||||
.container-main {
|
.container-main {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
}
|
}
|
||||||
|
/* #ifdef H5 */
|
||||||
|
.container-main {
|
||||||
|
padding-bottom: 120rpx!important;
|
||||||
|
}
|
||||||
|
/* #endif */
|
||||||
|
|
||||||
.main-scroll {
|
.main-scroll {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@@ -25,7 +25,6 @@
|
|||||||
@scroll="scrollTopBack"
|
@scroll="scrollTopBack"
|
||||||
:scroll-y="true"
|
:scroll-y="true"
|
||||||
class="sex-content-right"
|
class="sex-content-right"
|
||||||
@wheel="handleWheel"
|
|
||||||
>
|
>
|
||||||
<view v-for="item in rightValue" :key="item.id">
|
<view v-for="item in rightValue" :key="item.id">
|
||||||
<view class="secondary-title">{{ item.label }}</view>
|
<view class="secondary-title">{{ item.label }}</view>
|
||||||
@@ -58,6 +57,8 @@ export default {
|
|||||||
stationCateLog: 0,
|
stationCateLog: 0,
|
||||||
copyTree: [],
|
copyTree: [],
|
||||||
scrollTop: 0,
|
scrollTop: 0,
|
||||||
|
scrollTimer: null,
|
||||||
|
lastScrollTime: 0,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -90,38 +91,70 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
// 组件销毁前清除定时器
|
||||||
|
if (this.scrollTimer) {
|
||||||
|
clearTimeout(this.scrollTimer);
|
||||||
|
this.scrollTimer = null;
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
changeStationLog(item) {
|
changeStationLog(item) {
|
||||||
this.leftValue = item;
|
this.leftValue = item;
|
||||||
this.rightValue = item.children;
|
this.rightValue = item.children;
|
||||||
this.scrollTop = 0;
|
this.scrollTop = 0;
|
||||||
|
|
||||||
|
// 使用更激进的防抖策略,避免频繁的左侧滚动
|
||||||
|
if (this.scrollTimer) {
|
||||||
|
clearTimeout(this.scrollTimer);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.scrollTimer = setTimeout(() => {
|
||||||
// 确保左侧列表滚动到正确位置,让当前选中的标签可见
|
// 确保左侧列表滚动到正确位置,让当前选中的标签可见
|
||||||
this.$nextTick(() => {
|
|
||||||
const index = this.copyTree.findIndex(i => i.id === item.id);
|
const index = this.copyTree.findIndex(i => i.id === item.id);
|
||||||
if (index !== -1 && this.$refs.leftScroll) {
|
if (index !== -1 && this.$refs.leftScroll) {
|
||||||
// 计算需要滚动的距离(每个选项高度约160rpx)
|
const itemHeight = 160; // 每个选项高度
|
||||||
const scrollTop = index * 160;
|
const visibleHeight = 4 * itemHeight; // 可见区域高度
|
||||||
|
|
||||||
// 获取左侧列表的可见高度(假设可见区域能显示约3-4个选项)
|
// 计算目标位置
|
||||||
const visibleHeight = 4 * 160; // 约4个选项的高度
|
const targetTop = index * itemHeight;
|
||||||
|
|
||||||
// 确保选中的标签在可见区域内
|
// 获取当前左侧列表的滚动位置
|
||||||
let targetScrollTop = scrollTop;
|
const currentLeftScrollTop = this.$refs.leftScroll.scrollTop || 0;
|
||||||
|
|
||||||
|
// 只有当目标位置不在当前可见区域内时才滚动
|
||||||
|
if (targetTop < currentLeftScrollTop || targetTop > currentLeftScrollTop + visibleHeight - itemHeight) {
|
||||||
|
let targetScrollTop = targetTop;
|
||||||
|
|
||||||
// 如果选中的标签在底部,确保它不会滚动出可见区域
|
// 如果选中的标签在底部,确保它不会滚动出可见区域
|
||||||
if (scrollTop > this.$refs.leftScroll.scrollHeight - visibleHeight) {
|
if (targetTop > this.$refs.leftScroll.scrollHeight - visibleHeight) {
|
||||||
targetScrollTop = Math.max(0, this.$refs.leftScroll.scrollHeight - visibleHeight);
|
targetScrollTop = Math.max(0, this.$refs.leftScroll.scrollHeight - visibleHeight);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.$refs.leftScroll.scrollTo({
|
this.$refs.leftScroll.scrollTo({
|
||||||
top: targetScrollTop,
|
top: targetScrollTop,
|
||||||
duration: 300
|
duration: 100 // 进一步减少滚动动画时间
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
|
}, 100);
|
||||||
},
|
},
|
||||||
scrollTopBack(e) {
|
scrollTopBack(e) {
|
||||||
|
const currentTime = Date.now();
|
||||||
|
|
||||||
|
// 更严格的防抖处理:如果距离上次滚动时间太短,则跳过处理
|
||||||
|
if (currentTime - this.lastScrollTime < 80) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.lastScrollTime = currentTime;
|
||||||
|
|
||||||
|
// 清除之前的定时器
|
||||||
|
if (this.scrollTimer) {
|
||||||
|
clearTimeout(this.scrollTimer);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置新的定时器,延迟处理滚动事件
|
||||||
|
this.scrollTimer = setTimeout(() => {
|
||||||
this.scrollTop = e.detail.scrollTop;
|
this.scrollTop = e.detail.scrollTop;
|
||||||
|
|
||||||
// 滚动时自动选中对应的左侧标签
|
// 滚动时自动选中对应的左侧标签
|
||||||
@@ -131,8 +164,8 @@ export default {
|
|||||||
|
|
||||||
// 遍历所有右侧的二级标题,找到当前最接近顶部的那个
|
// 遍历所有右侧的二级标题,找到当前最接近顶部的那个
|
||||||
this.rightValue.forEach((section, index) => {
|
this.rightValue.forEach((section, index) => {
|
||||||
// 估算每个section的位置(假设每个section高度大约为 200rpx)
|
// 更精确地估算每个section的位置(考虑标题高度和内容高度)
|
||||||
const sectionTop = index * 200;
|
const sectionTop = index * 280; // 增加估算高度,避免过于敏感
|
||||||
const distance = Math.abs(sectionTop - scrollTop);
|
const distance = Math.abs(sectionTop - scrollTop);
|
||||||
|
|
||||||
if (distance < minDistance) {
|
if (distance < minDistance) {
|
||||||
@@ -141,58 +174,48 @@ export default {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// 如果找到了对应的section,并且不是当前选中的左侧标签,则切换左侧标签
|
// 只有当距离足够近时才切换左侧标签,避免过于敏感
|
||||||
if (currentSection && this.leftValue.id !== currentSection.parentId) {
|
if (currentSection && minDistance < 100 && this.leftValue.id !== currentSection.parentId) {
|
||||||
const parentItem = this.copyTree.find(item => item.id === currentSection.parentId);
|
const parentItem = this.copyTree.find(item => item.id === currentSection.parentId);
|
||||||
if (parentItem) {
|
if (parentItem) {
|
||||||
this.leftValue = parentItem;
|
this.leftValue = parentItem;
|
||||||
|
|
||||||
// 确保左侧列表滚动到正确位置,让当前选中的标签可见
|
// 使用更激进的防抖策略,避免频繁的左侧滚动
|
||||||
this.$nextTick(() => {
|
if (this.scrollTimer) {
|
||||||
|
clearTimeout(this.scrollTimer);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.scrollTimer = setTimeout(() => {
|
||||||
|
// 只在必要时滚动左侧列表,避免频繁滚动导致的抖动
|
||||||
const index = this.copyTree.findIndex(i => i.id === parentItem.id);
|
const index = this.copyTree.findIndex(i => i.id === parentItem.id);
|
||||||
if (index !== -1 && this.$refs.leftScroll) {
|
if (index !== -1 && this.$refs.leftScroll) {
|
||||||
// 计算需要滚动的距离(每个选项高度约160rpx)
|
// 获取当前左侧列表的滚动位置
|
||||||
const scrollTop = index * 160;
|
const currentLeftScrollTop = this.$refs.leftScroll.scrollTop || 0;
|
||||||
|
const itemHeight = 160; // 每个选项高度
|
||||||
|
const visibleHeight = 4 * itemHeight; // 可见区域高度
|
||||||
|
|
||||||
// 获取左侧列表的可见高度(假设可见区域能显示约3-4个选项)
|
// 计算目标位置
|
||||||
const visibleHeight = 4 * 160; // 约4个选项的高度
|
const targetTop = index * itemHeight;
|
||||||
|
|
||||||
// 确保选中的标签在可见区域内
|
// 只有当目标位置不在当前可见区域内时才滚动
|
||||||
let targetScrollTop = scrollTop;
|
if (targetTop < currentLeftScrollTop || targetTop > currentLeftScrollTop + visibleHeight - itemHeight) {
|
||||||
|
let targetScrollTop = targetTop;
|
||||||
|
|
||||||
// 如果选中的标签在底部,确保它不会滚动出可见区域
|
// 如果选中的标签在底部,确保它不会滚动出可见区域
|
||||||
if (scrollTop > this.$refs.leftScroll.scrollHeight - visibleHeight) {
|
if (targetTop > this.$refs.leftScroll.scrollHeight - visibleHeight) {
|
||||||
targetScrollTop = Math.max(0, this.$refs.leftScroll.scrollHeight - visibleHeight);
|
targetScrollTop = Math.max(0, this.$refs.leftScroll.scrollHeight - visibleHeight);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.$refs.leftScroll.scrollTo({
|
this.$refs.leftScroll.scrollTo({
|
||||||
top: targetScrollTop,
|
top: targetScrollTop,
|
||||||
duration: 300
|
duration: 100 // 进一步减少滚动动画时间
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
}, 150); // 增加延迟,避免滚动冲突
|
||||||
handleWheel(e) {
|
}
|
||||||
// 处理鼠标滚轮事件,让右侧内容可以滚动
|
}
|
||||||
e.preventDefault();
|
}, 80); // 增加防抖延迟到80ms
|
||||||
const delta = e.deltaY || e.wheelDelta;
|
|
||||||
|
|
||||||
// 更平滑的滚动,根据滚轮速度调整滚动量
|
|
||||||
const scrollAmount = Math.abs(delta) > 100 ? 80 : 40;
|
|
||||||
const direction = delta > 0 ? 1 : -1;
|
|
||||||
|
|
||||||
// 更新scrollTop来模拟滚动
|
|
||||||
this.scrollTop += scrollAmount * direction;
|
|
||||||
|
|
||||||
// 确保scrollTop在合理范围内
|
|
||||||
this.scrollTop = Math.max(0, this.scrollTop);
|
|
||||||
|
|
||||||
// 触发scroll事件来更新左侧标签选中状态
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.scrollTopBack({ detail: { scrollTop: this.scrollTop } });
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
addItem(item) {
|
addItem(item) {
|
||||||
let titiles = [];
|
let titiles = [];
|
||||||
@@ -285,6 +308,10 @@ export default {
|
|||||||
.sex-content-left
|
.sex-content-left
|
||||||
width: 198rpx;
|
width: 198rpx;
|
||||||
padding: 20rpx 0 0 0;
|
padding: 20rpx 0 0 0;
|
||||||
|
/* 添加硬件加速优化 */
|
||||||
|
transform: translateZ(0);
|
||||||
|
-webkit-transform: translateZ(0);
|
||||||
|
will-change: transform;
|
||||||
.left-list-btn
|
.left-list-btn
|
||||||
padding: 0 40rpx 0 24rpx;
|
padding: 0 40rpx 0 24rpx;
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -295,6 +322,9 @@ export default {
|
|||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
position: relative
|
position: relative
|
||||||
margin-top: 60rpx
|
margin-top: 60rpx
|
||||||
|
/* 优化渲染性能 */
|
||||||
|
transform: translateZ(0);
|
||||||
|
-webkit-transform: translateZ(0);
|
||||||
.left-list-btn:first-child
|
.left-list-btn:first-child
|
||||||
margin-top: 0
|
margin-top: 0
|
||||||
// .positionNum
|
// .positionNum
|
||||||
@@ -323,6 +353,10 @@ export default {
|
|||||||
// border-left: 2px solid #D9D9D9;
|
// border-left: 2px solid #D9D9D9;
|
||||||
background: #F6F6F6;
|
background: #F6F6F6;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
/* 添加硬件加速优化 */
|
||||||
|
transform: translateZ(0);
|
||||||
|
-webkit-transform: translateZ(0);
|
||||||
|
will-change: transform;
|
||||||
.grid-sex
|
.grid-sex
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 50% 50%;
|
grid-template-columns: 50% 50%;
|
||||||
@@ -340,6 +374,9 @@ export default {
|
|||||||
margin-top: 30rpx;
|
margin-top: 30rpx;
|
||||||
background: #E8EAEE;
|
background: #E8EAEE;
|
||||||
color: #606060;
|
color: #606060;
|
||||||
|
/* 优化渲染性能 */
|
||||||
|
transform: translateZ(0);
|
||||||
|
-webkit-transform: translateZ(0);
|
||||||
.sex-right-btned
|
.sex-right-btned
|
||||||
font-weight: 500
|
font-weight: 500
|
||||||
width: 224rpx;
|
width: 224rpx;
|
||||||
@@ -347,4 +384,7 @@ export default {
|
|||||||
background: rgba(37,107,250,0.06);
|
background: rgba(37,107,250,0.06);
|
||||||
border: 2rpx solid #256BFA;
|
border: 2rpx solid #256BFA;
|
||||||
color: #256BFA
|
color: #256BFA
|
||||||
|
/* 优化渲染性能 */
|
||||||
|
transform: translateZ(0);
|
||||||
|
-webkit-transform: translateZ(0);
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -17,6 +17,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="popup-list">
|
<view class="popup-list">
|
||||||
<expected-station
|
<expected-station
|
||||||
|
style="height: 100%;"
|
||||||
:search="false"
|
:search="false"
|
||||||
@onChange="changeJobTitleId"
|
@onChange="changeJobTitleId"
|
||||||
:station="state.stations"
|
:station="state.stations"
|
||||||
|
|||||||
@@ -736,6 +736,19 @@ for i in 0..100
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
/* #ifdef H5 */
|
||||||
|
.footer{
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
padding: 20rpx 0!important
|
||||||
|
.btn-wq{
|
||||||
|
display: block;
|
||||||
|
width: 94%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* #endif */
|
||||||
.footer{
|
.footer{
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
box-shadow: 0rpx -4rpx 24rpx 0rpx rgba(11,44,112,0.12);
|
box-shadow: 0rpx -4rpx 24rpx 0rpx rgba(11,44,112,0.12);
|
||||||
|
|||||||
Reference in New Issue
Block a user