简单实现滑块组件，废话多说先上代码和展示效果

<template>
  <div class="sliderContainer">
      <div class="submitNote"></div>
      <div class="note-card-item" v-for="item in 8" :key="item">{{item}}</div>
  </div>
</template>

<script setup lang="ts">

</script>

<style lang="less">
.sliderContainer{
    white-space:nowrap;
    overflow-x:scroll;
    overflow-y:hidden;
    .submitNote{
        margin: 10px;
        float: left;
        width: 100px;
        height: 80px;
        line-height: 0;
        background: red;
    }
    .note-card-item{
        margin: 10px;
        display: inline-block;
        width: 100px;
        height: 80px;
        background: blue;
    }
}
.sliderContainer::-webkit-scrollbar {
     display:none
}
</style>

效果图：

其中注意点就是

• 设置滚动方向及做不转行操作

.father{
	white-space:nowrap;
	overflow-x:scroll;
	overflow-y:hidden; /*如果做纵轴方向就不用做不转行操作*/
}

• 子容器设置宽高及变成行内块元素

.child{
	 display: inline-block;
     width: 100px;
     height: 80px;
     background: blue; /*为效果更明显*/
}

• 隐藏滚动条设置为display为none

.sliderContainer::-webkit-scrollbar {
     display:none
}

《项目笔记篇》更新中~