<template> <Scroll class="product-list-wrapper" direction="horizontal" :options="scrollOpts"> <ul class="list-wrapper"> <ProductItem v-for="item in 3" class="list-item"></ProductItem> </ul> </Scroll> </template> <script> import {Scroll} from 'cube-ui'; import ProductItem from './product-item'; export default { name: 'Test', data() { return { scrollOpts: { click: false } }; }, components: { Scroll, ProductItem } }; </script> <style lang="scss" scoped> .product-list-wrapper { width: 290px; height: 100px; overflow: hidden; /deep/ .cube-scroll-content { display: inline-block; } } .list-wrapper { padding: 0 10px; line-height: 60px; white-space: nowrap; } .list-item { display: inline-block; margin-right: 20px; } </style>