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

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

HTML

       <scroll-view scroll-x="true" class="special-scroll">
         <view class="special-item"  wx:for="{{10}}" wx:key="{{index}}">
            <image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg" class="image" mode="aspectFit"></image>
          <view class="name">啊啊啊啊啊</view>
          <view class="price">￥456{{index}}</view>
         </view>
         <view class="special-item-last">
            <view style="font-size: 36rpx">+10</view>
            <view style="font-size:24rpx;">查看全部单品</view>
         </view>
       </scroll-view>
    </view>

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;
    }
  }

最后效果