快应用实现横向滚动列表 （前端）

在快应用里，想要实现uview里面的这个效果

可以使用list组件，flex-direction这个属性是关键的

 

<template>
  <div>
    <list class="list" flex-direction="row" >
      <list-item type="listItem" class="item" for="{{list}}" >
        <text class="txt">{{ $item }}--{{ $idx }}</text>
      </list-item>
    </list>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      list: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
    }
  },
}
</script>
  
<style>
.list {
  flex: 1;
  padding: 0 60px;
}

.item {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid red;
  background-color: pink;
}
</style>