vue项目分类列表添加滚动条

传参形式:
list: [
{name: ‘新手’, url: ‘’, img: require(’@/assets/menu/yd.png’)},
{name: ‘会员’, url: ‘’, img: require(’@/assets/menu/hy.png’)},
]

<template>
  <div class="hall">
    <div id="hallOne">
      <div @click="click(item)" :key="index" v-for="(item, index) in list">
        <div class="img_div">
          <img :src="item.img" alt="暂无图片">
        </div>
        <div class="grid_div">{{item.name}}</div>
      </div>
    </div>
    <div class="gudong">
      <div id="tiao"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'scroll',
  props: {
    list: {
      type: Array,
      default: () => {[]}
    }
  },
  mounted() {
    var h =  document.getElementById("hallOne")
    h.onscroll = () => {
      var tiao = document.getElementById("tiao")
      var x = h.scrollWidth - h.clientWidth
      tiao.style.marginLeft = h.scrollLeft * 30/x + 'px'
    }
  },
  methods: {
    click(item) {
      this.$emit('click', item)
    }
  },
}
</script>

<style lang="scss" scoped>
.hall {
  background: #fff;
  padding: 10px 0;
  height: 90px;
  width: 100%;
  #hallOne {
    display: flex;
    height: 80px;
    overflow-x: auto;
    > div {
      padding: 5px 0;
      text-align: center;
      flex-basis: 75px;
      flex-shrink: 0;
    }
  }
  #hallOne::-webkit-scrollbar {
    display: none;
  }
  .img_div {
    position: relative;
    height: 45px;
    img {
      width: 34px;
      height: 34px;
    }
  }
  .grid_div {
    font-size: 12px;
  }
  .gudong {
    height: 5px;
    border-radius: 3px;
    width: 50px;
    margin: 0 auto;
    background: #999;
    #tiao {
      height: 5px;
      width: 20px;
      border-radius: 3px;
      background: #ee4a50;
    }
  }
}

</style>