feat:滚动标题开发
This commit is contained in:
parent
31d56dd18a
commit
55f0298bfc
BIN
src/assets/test/headerBG.png
Normal file
BIN
src/assets/test/headerBG.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 258 KiB |
BIN
src/assets/test/titleBG.png
Normal file
BIN
src/assets/test/titleBG.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 914 B |
189
src/components/ScrollTitle/index.vue
Normal file
189
src/components/ScrollTitle/index.vue
Normal file
@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<section class="header_title" :style="{ '--titleContentW': titleContentW + 'px', '--itemW': itemW + 'px', '--gap': gap + 'px' }">
|
||||
<el-button icon="el-icon-arrow-left" class="left_btn" @click="handleTitleBtn(1)"></el-button>
|
||||
<el-button icon="el-icon-arrow-right" class="right_btn" @click="handleTitleBtn(-1)"></el-button>
|
||||
<section class="left_titles_container">
|
||||
<section class="title_content" :style="{ left: `-${position}px` }">
|
||||
<section
|
||||
v-for="(item, i) in leftTitles"
|
||||
:key="`left_title_${i}`"
|
||||
:class="['title_item', activeTitle == item.value ? 'active' : '']"
|
||||
@click="handleTitleClick(item.value)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
<section class="right_titles_container">
|
||||
<section class="title_content" :style="{ left: `${right ? right + 'px' : '-' + position + 'px'}` }">
|
||||
<section
|
||||
v-for="(item, i) in rightTitles"
|
||||
:key="`right_title_${i}`"
|
||||
:class="['title_item', activeTitle == item.value ? 'active' : '']"
|
||||
@click="handleTitleClick(item.value)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ScrollTitle',
|
||||
props: {
|
||||
titles: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [
|
||||
{ label: '标题1', value: '1' },
|
||||
{ label: '标题2', value: '2' },
|
||||
{ label: '标题3', value: '3' },
|
||||
{ label: '标题4', value: '4' },
|
||||
{ label: '标题5', value: '5' },
|
||||
{ label: '标题6', value: '6' },
|
||||
{ label: '标题7', value: '7' },
|
||||
{ label: '标题8', value: '8' },
|
||||
{ label: '标题9', value: '9' },
|
||||
{ label: '标题10', value: '10' },
|
||||
{ label: '标题11', value: '11' },
|
||||
{ label: '标题12', value: '12' },
|
||||
{ label: '标题13', value: '13' },
|
||||
{ label: '标题14', value: '14' },
|
||||
{ label: '标题15', value: '15' },
|
||||
{ label: '标题16', value: '16' },
|
||||
{ label: '标题17', value: '17' },
|
||||
{ label: '标题18', value: '18' },
|
||||
{ label: '标题19', value: '19' },
|
||||
];
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
titleContentW: '0',
|
||||
itemW: '1',
|
||||
gap: 24,
|
||||
leftNum: 0,
|
||||
position: 0,
|
||||
right: null,
|
||||
activeTitle: '1',
|
||||
leftTitles: [],
|
||||
rightTitles: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
titles: {
|
||||
handler(val) {
|
||||
if (val && val.length) {
|
||||
let l = val.length;
|
||||
if (l > 6) {
|
||||
this.leftTitles = val.slice(0, l - 3);
|
||||
this.rightTitles = val.slice(3);
|
||||
} else {
|
||||
this.leftTitles = val.slice(0, 3);
|
||||
if (l > 3) {
|
||||
this.rightTitles = val.slice(3);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.hadnleWidth();
|
||||
},
|
||||
methods: {
|
||||
hadnleWidth() {
|
||||
let ld = document.querySelector('.left_titles_container');
|
||||
let w = ld.clientWidth;
|
||||
this.itemW = (w - 2 * this.gap) / 3;
|
||||
this.titleContentW = this.itemW * this.leftTitles.length + this.leftTitles.length * this.gap;
|
||||
if (this.titles.length > 3 && this.titles.length < 6) {
|
||||
let l = 3 - (this.titles.length - 3);
|
||||
this.right = l * this.itemW + (l - 1) * this.gap;
|
||||
}
|
||||
},
|
||||
handleTitleBtn(t = -1) {
|
||||
if (this.titles.length > 6) {
|
||||
if (this.leftNum > -1) this.leftNum = this.leftNum + t;
|
||||
if (this.leftNum < 0) this.leftNum = 0;
|
||||
if (this.leftNum > this.leftTitles.length - 3) this.leftNum = this.leftTitles.length - 3;
|
||||
this.position = this.leftNum * this.itemW + this.leftNum * this.gap;
|
||||
}
|
||||
},
|
||||
handleTitleClick(val) {
|
||||
this.activeTitle = val;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header_title {
|
||||
position: relative;
|
||||
padding: 0 68px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
background: url('../../assets/test/headerBG.png') no-repeat center/cover;
|
||||
.left_btn,
|
||||
.right_btn {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
padding: 6px 6px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: rgb(39, 172, 255);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
user-select: none;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
.left_btn {
|
||||
left: 14px;
|
||||
}
|
||||
.right_btn {
|
||||
right: 14px;
|
||||
}
|
||||
.left_titles_container,
|
||||
.right_titles_container {
|
||||
position: relative;
|
||||
width: 30%;
|
||||
height: 60px;
|
||||
overflow: hidden;
|
||||
.title_content {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
width: var(--titleContentW);
|
||||
height: 40px;
|
||||
transition: all 0.4s ease;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #f5f5f5;
|
||||
.active {
|
||||
color: #fff;
|
||||
text-shadow: 1px 1px 2px red;
|
||||
}
|
||||
.title_item {
|
||||
margin-right: var(--gap);
|
||||
display: inline-block;
|
||||
width: var(--itemW);
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
background: url('../../assets/test/titleBG.png') no-repeat center/cover;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user