小程序实现横向滑块，超过10个则出现查看更多

需求是小程序banner下增加横向滑块，用于展示专题列表

1.思路是用 scroll-view + scroll-x="true"
2.遇到的问题是：超过10个后，我添加的点击更多块总是居下显示

解决办法是：给最后点击更多的块加上vertical-align: top;

HTML

       
         
            
          啊啊啊啊啊
          ￥456{{index}}
         
         
            +10
            查看全部单品
         
       
    

CSS

    .special-list{
    width: 100%;
    height: 307rpx;
    overflow: hidden;
    padding: 20rpx 0 0 38rpx;
    background: #fff;
    white-space: nowrap;
    .special-scroll{
      height: 330rpx;width: auto;overflow:hidden;
    }
    .special-item{
      height:184rpx;
      width: 184rpx;
      display: inline-block;
      margin-right:40rpx;
      background-color: #aaa;
      .image{
        height:184rpx;
        width: 184rpx;
      }
    }
    .name{
      font-size: 20rpx;
      color: $normalGrayFont;
      -webkit-line-clamp:1;
      overflow: hidden;
      display:-weblit-box;
      word-break: break-all;
      text-overflow: ellipsis;
    }
    .price{
      font-size:28rpx;
    }
    .special-item-last{
      height:184rpx;
      width: 184rpx;
      border:2rpx solid #ddd;
      border-radius:2rpx;
      display: inline-block;
      margin-right:40rpx;
      text-align: center;
      vertical-align: top;
      padding:44rpx 0;
    }
  }

最后效果