左右箭头滑动

<template>
  <div id="app">
    <div class="nav-container">
      <div class="nav-content">
        <div class="lf-arrow" @click="leftmove">左箭头</div>
          <ul class="btn-container" :style="{width: 3*280 + 'px'}" ref="ulRef">
            <li v-for="(item, index) in domains" :key="index" class="btn-item">{{item.content}}</li>
        </ul>
        <div class="rg-arrow" @click="rightmove">右箭头</div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
      return {
          domains: [
            {
            id: '1',
            content: '剧本内容一',
            type: 1
            },
            {
            id: '2',
            content: '剧本内容二',
            type: 2
            },
            {
            id: '3',
            content: '剧本内容三',
            type: 1
            },
            {
            id: '4',
            content: '剧本内容四',
            type: 1
            },
            {
            id: '5',
            content: '剧本内容五',
            type: 1
            }
          ],
          itemIndex: 0
      }
  },
  mounted() {
  },
  methods: {
    leftmove() {
      if (this.itemIndex < 0) {
        this.itemIndex += 1;
        this.$refs.ulRef.scrollLeft -= 50
      }
    },
    rightmove() {
      if (this.domains.length > 3) {
        console.log(this.itemIndex)
        this.itemIndex -= 1;
        this.$refs.ulRef.scrollLeft += 50
      }
    },
    prevClick() {
      console.log('da')
      
    } 
  }
}
</script>

<style>
.fenye ul {
  width: 100px;
  overflow: scroll;
  overflow-y: hidden;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  width: 100%;
}
.nav-container {
  width: 100%;
}
.nav-container .nav-content {
  width: 1000px;
  margin: 0 auto;
  display: flex;
  /* overflow: hidden; */
}
.btn-container {
  flex: 1;
  flex-shrink: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  margin: 0 10px;
  overflow: hidden;
  box-sizing: border-box;
}
.lf-arrow,.rg-arrow{
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 14px;
  background: yellowgreen;
  cursor: pointer;
  position: relative;
  z-index: 222;
}
.lf-arrow {
  margin-right: 10px;
}
.rg-arrow {
  margin-left: 10px;
}
/* .btn-container {
  flex: 1;
  flex-shrink: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  margin: 0 10px;
  overflow: hidden;
} */
.btn-container .btn-item {
  flex-shrink: 0;
  width: 276px;
  height: 50px;
  border: 1px solid greenyellow;
  line-height: 50px;
  text-align: center;
  border-radius: 50px;
  margin-right: 10px;
}
.btn-container li:last-child {
  margin-right: 0 !important;
}

</style>