css：横向滚动布局

最新推荐文章于 2025-05-19 14:12:43 发布

奶绿走糖

最新推荐文章于 2025-05-19 14:12:43 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/ljtjianting/article/details/131729191

css 专栏收录该内容

9 篇文章

订阅专栏

此代码段展示了如何在Vue.js中创建一个带有顶部和底部菜单的布局。每个菜单项包含图片和文字，使用v-for指令进行数据绑定，并应用了CSS样式进行布局调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

在这里插入图片描述

实现代码：

<template>
  <div class="index_div">
    <div class="container">
      <div class="flexBox">
        <div class="flex_item" v-for="item in topMenu" :key="item.id">
          <img src="@/assets/image/action/autoRule.png" alt="">
          <div>{{ item.name }}</div>
        </div>
      </div>
      <div class="flexBox">
        <div class="flex_item" v-for="item in bottomMenu" :key="item.id">
          <img src="@/assets/image/action/minMax.png" alt="">
          <div>{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'H5Test',

  data() {
    return {
      topMenu: [{ id: '1-1',name: '广州'}, { id: '1-2',name: '深圳'}, { id: '1-3',name: '北京'}, { id: '1-4',name: '上海'}, { id: '1-5',name: '东莞'}, { id: '1-6',name: '珠海'}, { id: '1-7',name: '肇庆'}],
      bottomMenu: [{ id: '2-1',name: '美食'}, { id: '2-2',name: '行街'}, { id: '2-3',name: '演出'}, { id: '2-4',name: '展览'}, { id: '2-5',name: '打卡'}],
    };
  },

  mounted() {
    
  },

  methods: {
    
  },
};
</script>

<style lang="less" scoped>
.index_div{
  padding: 10px;
}
.container{
  padding: 20px;
  overflow: hidden;
  overflow-x: scroll;
  border-radius: 20px;
  background: #ecbf94;
}
.flexBox{
  display: inline-flex;
  align-items: center;
  margin-bottom: 20px;
  &:nth-last-child(1){
    margin-bottom: unset
  }
  .flex_item{
    width: 55px;
    height: 55px;
    text-align: center;
    padding: 5px;
    margin-right: 15px;
    border-radius: 10px;
    background: #ffe7cd;
    flex: 0 0 auto; // 等同于 flex: none，默认元素有剩余空间也不放大，空间不足时也不能缩小
    &:nth-last-child(1){
      margin-right: unset;
    }
    img{
      width: 25px;
    }
  }
}
</style>