Vue3 支持SSR 手撸可滑动Tab栏

卷不动了阿

已于 2023-09-20 13:51:36 修改

阅读量181

点赞数

分类专栏： Vue 教程文章标签：前端 vue.js

于 2023-09-16 20:37:30 首次发布

本文链接：https://blog.csdn.net/weixin_44258422/article/details/132923971

版权

Vue 教程专栏收录该内容

17 篇文章 1 订阅

订阅专栏

效果

在这里插入图片描述

核心代码

// 计算当前按钮的位置，看是否需要移动
let spanLeft = event.clientX // 当前点击的元素左边距离
let divBox = document.querySelector(".tabBoxs").clientWidth / 2 // 点击的元素一半宽度
let totalWidths = document.body.clientWidth; // 屏幕总宽度
let widths = totalWidths / 2; // 一半的屏幕宽度
let spanRight = totalWidths - spanLeft; // 元素的右边距离
let scrollBox = document.querySelector(".tabWraps"); // 获取最外层的元素
let scrollL = scrollBox.scrollLeft; // 滚动条滚动的距离
// 当元素左边距离 或者 右边距离小于400时进行滑动
if (spanRight < 400 || spanLeft < 400) {
    scrollBox.scrollLeft = scrollL + (spanLeft - widths) + divBox;
}

封装成组件

<template>
    <div class="tabWraps">
        <div :class="['tabBox', crowdIndex == item.dictLabel && 'tabBoxs']" v-for="(item, index) in crowdList" :key="index"
            @click="tabClick(item,$event)">
            {{ item.dictLabel }}
        </div>
    </div>
</template>
 
<script setup>
const emit = defineEmits(['tabCkange'])
const props = defineProps(['crowdList'])

const data = reactive({
    crowdIndex: '全部',
})
 
const { crowdIndex } = toRefs(data)

// tab切换
const tabClick = (item, event) => {
    if (crowdIndex.value != item.dictLabel) {
        crowdIndex.value = item.dictLabel
        // 计算当前按钮的位置，看是否需要移动
        let spanLeft = event.clientX // 当前点击的元素左边距离
        let divBox = document.querySelector(".tabBoxs").clientWidth / 2 // 点击的元素一半宽度
        let totalWidths = document.body.clientWidth; // 屏幕总宽度
        let widths = totalWidths / 2; // 一半的屏幕宽度
        let spanRight = totalWidths - spanLeft; // 元素的右边距离
        let scrollBox = document.querySelector(".tabWraps"); // 获取最外层的元素
        let scrollL = scrollBox.scrollLeft; // 滚动条滚动的距离
        // 当元素左边距离 或者 右边距离小于400时进行滑动
        if (spanRight < 400 || spanLeft < 400) {
            scrollBox.scrollLeft = scrollL + (spanLeft - widths) + divBox;
        }
        emit('tabCkange', item.dictLabel)
    }
}

</script>
 
<style lang="scss" >
.tabWraps{
    width: 100%;
    display: flex;
    overflow-x: auto;
    .tabBox {
        flex-shrink: 0;
        padding: 8px 24px;
        font-size: 16px;
        font-weight: 500;
        color: #333333;
        border-radius: 8px;
        cursor: pointer;
    }
    .tabBoxs{
        flex-shrink: 0;
        padding: 8px 24px;
        font-size: 16px;
        font-weight: 500;
        border-radius: 8px;
        cursor: pointer;
        background: #305AFF;
        color: #FFFFFF; 
    }
}
.tabWraps::-webkit-scrollbar {
  width: 0;
  opacity: 0;
  display: none;
}
</style>