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

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

实现

首先是效果图

下面是布局代码：

      
        在读
        
        全部{{bookshelf.count}}本
      
      
        
          
            
              
            
            {{item.title}}
          
        
      
    

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

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