vue 横向滚动条

1,002 阅读1分钟
      <scroll-view scroll-x="true" class="bookshelf-content">
          <block v-for="(item, index) in cates" :key="index">
            <view
              @click="chenked(item.id)"
              :class="{ active: isActive == item.id }"
              class="item"
            >
              <text class="item-title text-over-1">{{ item.name }}</text>
            </view>
          </block>
        </scroll-view>
        
        
        
        
    .bookshelf-content {
      white-space: nowrap; // 滚动必须加的属性
      width: 100%;
      height: 280upx;
      padding: 20upx;
      margin: 0 auto;
      .item {
        width: 24%;
        margin-right: 20upx;
        display: inline-block;
        vertical-align: top;
        .img {
          display: inline-block;
          image {
            width: 170upx;
            height: 220upx;
            border-radius: 6upx;
          }
        }
        .item-title {
          display: block; // 让字体换行
          width: 90%;
          font-size: 30upx;
          line-height: 40upx;
        }
      }
    }