标签：滑块 100px height 滚动条 width background 组件 overflow display

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

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

《项目笔记篇》更新中~

标签：滑块,100px,height,滚动条,width,background,组件,overflow,display
来源： https://blog.csdn.net/weixin_50789156/article/details/123108803

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。