横向滚动.vue

<template>
  <!-- <div class="scroll">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">X</div>
        <div class="item">XI</div>
    </div> -->
  <div style="width:250px;">

<!-- <div class="scrollmenu">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="#support">Support</a>
  <a href="#blog">Blog</a>
  <a href="#tools">Tools</a>  
  <a href="#base">Base</a>
  <a href="#custom">Custom</a>
  <a href="#more">More</a>
  <a href="#logo">Logo</a>
  <a href="#friends">Friends</a>
  <a href="#partners">Partners</a>
  <a href="#people">People</a>
  <a href="#work">Work</a>
</div> -->
    <div class="scrollmenu">
      <div v-for="(i, index) in max" :key="i" :style="style(index)">周{{ i }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WebViewInit',
  data() {
    return {
      max: 0,
    }
  },
  methods: {
    style(index) {
      var style = {}
      var w = screen.width - 24
      if (index == 0||(index+1)==this.max) {
        style.width = w / 7 + 12 + 'px'
      } else {
        style.width = w / 7 + 'px'
      }
      return style
    },
  },
  mounted() {
    console.log('screen.width', screen.width)
    this.max = 10
  },
}
</script>
<style lang="less" scoped>
// .item {
//   float: left;
// }
/* 父元素 */
.scroll {
  display: flex;
  overflow: visible;
}
/* 子元素 */
.item {
  /* width: 100px; */
  width: 100px;
  height: 50px;
  background-color: gray;
  border-right: 1px solid;
  text-align: center;
  flex-shrink: 0;
  line-height: 50px;
}
div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
  -webkit-scrollbar:none;
}
div.scrollmenu::-webkit-scrollbar {
  display: none;
}


div.scrollmenu div {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: #777;
}
</style>