uni-app 用scroll-view实现横向滚动

前端小白的uni-app艰难学习之路

实现

首先是效果图

下面是布局代码：

<view class="bookshelf">
      <view class="title">
        <text>在读</text>
        <text class="icon icon-next fr"></text>
        <text class="fr">全部{{bookshelf.count}}本</text>
      </view>
      <scroll-view scroll-x="true" class="bookshelf-content">
        <block v-for="(item, index) in bookshelf.novel" :key="index">
          <view class="item" @tap="goDetail(item.id)">
            <view class="img">
              <image :src="imgUrl(item.pic)" mode=""></image>
            </view>
            <text class="item-title text-over-1">{{item.title}}</text>
          </view>
        </block>
      </scroll-view>
    </view>

注意！这里的block非常关键，去掉就不能在一行显示了

接下来是css代码：

.bookshelf {
      margin-top: 540upx;
      .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;
          }
        }
      }
    }

注释的两行也是关键

js代码就是一些赋值和方法了，因人而异，这里就不贴出来了

这个横向滚动看似简单，但是要做成这种图文的形式，还要要注意一下的，上面提到过的注意点都是比较关键的