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

男娘i 2022-01-22 13:39 1420阅读 0赞

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

## 实现 ##

首先是效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE0Mzk3NQ_size_16_color_FFFFFF_t_70]  
下面是布局代码：

<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代码就是一些赋值和方法了，因人而异，这里就不贴出来了

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE0Mzk3NQ_size_16_color_FFFFFF_t_70]: /images/20220122/71213a79a8de4ebbb0b75c83407d196e.png