vue-seamless-scroll实现无缝上下滚动与左右滚动

<template>
  <div class="new-list userImage">
    <vueSeamless :data='newList'
                 :class-option="optionCustomer">
      <ul class="userImageAllWrapper">
        <li v-for="item in newList"
            :style="item.type == 1 ? redColor : '' "
            :key="item.index">
          {{item.title}}
        </li>
      </ul>
    </vueSeamless>
  </div>
</template>

<script>
import vueSeamless from 'vue-seamless-scroll'
export default {
  name: '',
  data () {
    return {
      optionCustomer: {
        step: 1,
        limitMoveNum: 5,
        openTouch: false,
        waitTime: 1,
        direction: 2,
        singleWidth: 30
      },
      redColor: { 'color': 'red' },
      newList: [{ title: '文字信息列表' }, { title: '文字信息列表' }, { title: '文字信息列表' }, { type: 1, title: '文字信息列表' }, { type: 1, title: '文字信息列表' }, { type: '', title: '文字信息列表' }],

    };
  },
  components: { vueSeamless },
  mounted () { },
  methods: {
  }
}
</script>

<style scoped>
@import "../assets/css/common.css";
.userImage {
  overflow: hidden;
}
.userImageAllWrapper {
  width: 1160px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.userImageAllWrapper:last-child {
  margin-left: -20px;
}
.userImageAllWrapperli {
  margin-right: 20px;
  margin-bottom: 20px;
  padding: 10px 30px； border： 1px solid #ececec;
}
.new-list {
  position: absolute;
  left: 20px !important;
  right: 20px;
  top: 0;
  background: rgba(0, 0, 0, 0.3);
  top: inherit;
  bottom: 20px;
  left: 10px;
  border-radius: 3px;
  padding: 0px 10px;
  overflow: hidden;
  height: 50px;
}
.new-list li {
  margin: 0 20px;
  display: inline-block;
  line-height: 50px;
}
</style>