后台管理项目面包屑导航
官网地址betterscroll
https://better-scroll.github.io/docs-v1/doc/zh-hans/
引用
npm install better-scroll --save
使用
<template>
<div class="common_tabs">
<div class="button pointer " @click="scrollLeft">
<lay-icon type="layui-icon-left"></lay-icon>
</div>
<div class="scroll_wrapper" ref="scroll_wrapper">
<ul class="scroll_content">
<li class="scroll_item" v-for="item,index in list" :key="index" @click="tabsItem(item,index)">
<span>
<lay-icon type="layui-icon-circle-dot" :color="activeIndex == index ?'#1e9fff': '#d3d3d3' " size="12px"></lay-icon>
</span>
<span class="padx5 scroll_text">{{ item.label }}</span>
<span v-if="item.path !== '/home'" @click="deleteItem(index)">
<lay-icon type="layui-icon-close" size="12px"></lay-icon>
</span>
</li>
</ul>
</div>
<div class="button pointer" @click="scrollRight">
<lay-icon type="layui-icon-right"></lay-icon>
</div>
</div>
<lay-button @click="addItem">新增</lay-button>
</template>
<script setup>
import BScroll from 'better-scroll'
import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
import { useRouter, useRoute, } from 'vue-router'
const route = useRoute()
const router = useRouter()
let bs;
// 数据列表
const list = ref([
{
path: '/home',
label: '首页',
is_delete: false
},
])
// 选中项
const activeIndex = ref(0)
// 滚动框模型
const scroll_wrapper = ref(null)
// 向右滚动
const scrollRight = () => {
bs.scrollBy(-100, 0)
bs.refresh();
}
// 向左滚动
const scrollLeft = () => {
bs.scrollBy(100, 0)
bs.refresh();
}
let sum = ref(0)
// 新增项
const addItem = () => {
sum.value++
const item = {
label: '测试' + sum.value,
is_delete: false
}
list.value.push(item)
let index = list.value.length - 1
activeIndex.value = index
}
// 监听选中值的变化
watch(activeIndex, newVal => {
nextTick().then(() => {
bs.refresh()
const selectedItemElement = document.querySelectorAll('.scroll_item')[newVal]
console.log(selectedItemElement);
if (selectedItemElement) {
// 使用 scrollToElement 方法将选中项滚动到可视范围内
bs.scrollToElement(selectedItemElement, 300); // 300ms 是滚动动画的时间
}
})
})
// 删除项
const deleteItem = index => {
list.value.splice(index, 1)
}
// 切换导航项
const tabsItem = async (val, index) => {
activeIndex.value = index
}
onMounted(() => {
// 实例滚动框
bs = new BScroll(scroll_wrapper.value, {
scrollX: true,
click: true,
})
})
onUnmounted(() => {
bs.destroy()
})
</script>
<style lang="scss">
.common_tabs{
display: flex;
border: 1px solid #e6e6e6;
}
.scroll_wrapper{
width:calc(100% - 80px);
// height: 36px;
white-space: nowrap;
overflow:hidden;
background-color: #fff;
.scroll_content{
display: inline-block;
.scroll_item{
display: inline-block;
height: 36px;
padding: 0 15px;
border-right: 1px solid #e6e6e6;
line-height: 36px;
text-align: center;
font-size: 14px;
cursor: pointer;
}
}
}
.button{
width: 40px;
height: 36px;
text-align: center;
line-height: 36px;
border-left: 1px solid #e6e6e6;
border-right: 1px solid #e6e6e6;
background-color: #fff;
}
</style>
选中项发生变化时会自动将选中项展示在展示区域内