2021/03/28 vue横向滚动栏

最新推荐文章于 2023-05-30 11:26:06 发布

六月要好好加油呀

最新推荐文章于 2023-05-30 11:26:06 发布

阅读量331

点赞数

分类专栏： # css # Vue

本文链接：https://blog.csdn.net/Nighsloth/article/details/115290378

版权

Vue 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

css

10 篇文章 0 订阅

订阅专栏

想要的效果做成这种可以滚动选择的效果
html代码

<!-- 标题 -->
      <div class="choose-title">选择路线</div>
      <!-- 集货道名称 -->
      <div class="track-group">
        <div
          class="track-item"
          v-for="(item, index) in tracksList"
          :key="index"
          :class="item.isTrackSeleted ? 'choosed' : ''"
          @click="tracksItemClick(item, index)"
        >
          {{ item.name }}
        </div>
      </div>

css代码

.track-group {
      // outline: 1px solid gray;
      display: flex;

      // 设置横向滚动
      white-space: nowrap; //段落中文本不换行
      overflow-x: scroll; //设置横向滚动
      overflow-y: hidden; //禁止纵向滚动
      text-align: justify; //文字平铺
      justify-content: space-between;
    }

    // 隐藏滚动条
    .track-group::-webkit-scrollbar {
      display: none;
    }

    .track-item {
      // outline: 1px solid blue;
      // flex: 0 0 100px;
      // 这是需要设置 flex-grow、flex-shrink为0，否则宽度设置会失效
      width: 70px;
      flex-grow: 0; //禁止自动增长
      flex-shrink: 0; //禁止自动缩小
      height: 38px;
      text-align: center;
      line-height: 38px;
      background: #ffffff;
      border: 1px solid #dfdfdf;
      border-radius: 34px;

      margin: auto 9px;
    }

主要就是注意css样式
🔗1:参考链接
如果遇到使用display写样式，但是不能给子元素设置宽度，可以参考下篇文章
🔗2:flex布局：父元素设为flex,子元素设置宽度无效

2021/08/20 更新
写了个简单的横向拖动样式，大家可以参考，可以在它的基础上改成自己需要的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        /* 大盒子样式 */
        .container-box {
            outline: 1px solid orange;
            width: 400px;
            height: 200px;
        }

        /* 滚动栏 */
        .track-group {
            outline: 1px solid gray;
            display: flex;
            /* 设置横向滚动 */
            /* 段落中文本不换行 */
            white-space: nowrap;
            /* 设置横向滚动 */
            overflow-x: scroll;
            /* 禁止纵向滚动 */
            overflow-y: hidden;
            /* 文字平铺 */
            text-align: justify;
            justify-content: space-between;

        }

        /* 隐藏滚动条 */
        .track-group::-webkit-scrollbar {
            display: none;
        }

        /* 每一个标题样式 */
        .track-item {
            width: 70px;
            flex-grow: 0;
            flex-shrink: 0;
            height: 38px;
            text-align: center;
            line-height: 38px;
            background: #ffffff;
            border: 1px solid #dfdfdf;
            border-radius: 34px;
            margin: auto 9px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container-box">
            <!-- 名称 -->
            <p>选择项目</p>
            <!-- 标题滚动栏 -->
            <div class="track-group">
                <div class="track-item" v-for="(item,index) in trackList" :key="index">
                    {{item.name}}
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                trackList: [
                    { name: "A01" },
                    { name: "A02" },
                    { name: "A03" },
                    { name: "A04" },
                    { name: "A05" },
                    { name: "A06" },
                    { name: "A07" },
                    { name: "A08" },
                ]
            },
        })
    </script>
</body>

</html>

六月要好好加油呀

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
2021/03/28 vue横向滚动栏

想要的效果做成这种可以滚动选择的效果html代码 <div class="choose-title">选择路线</div>  <div class="track-group"> <div class="track-item" v-for="(item, index) in tr..
复制链接

扫一扫