feat:滚动标题开发

src/components/ScrollTitle/index.vue

@@ -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>