uniappscroll-view横向滚动上下两个盒子

可以使用uniapp的scroll-view组件实现横向滚动。需要设置scroll-x属性为true，同时设置容器的宽度为所有子项宽度之和，子项使用display:inline-block属性实现横向排列。以下是一个示例代码：

<scroll-view class="scrollContainer" scroll-x>
  <view class="scrollitem" v-for="(item, index) in goodsArr" :key="index" @click="getItem(item)">
    <image class="scrollimage" :src="item.contentPic"></image>
    <view class="recommandItemText">{{item.contentTitle}}</view>
  </view>
  <view class="EmptyData" v-if="goodsArr.length==0">暂无数据</view>
</scroll-view>

<style>
  /* 容器 */
  .scrollContainer {
    width: 666rpx;
    height: 234rpx;
    white-space: nowrap;
  }
  /* 容器项 */
  .scrollitem {
    display: inline-block;
    margin-left: 30rpx;
    height: 234rpx;
  }
  .scrollimage {
    width: 270rpx;
    height: 154rpx;
  }
  .recommandItemText {
    width: 270rpx;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .EmptyData {
    text-align: center;
    margin-top: 50rpx;
  }
</style>

以上代码中，scroll-view组件的scroll-x属性设置为true，容器的宽度设置为所有子项宽度之和，子项使用display:inline-block属性实现横向排列。同时，还可以设置子项的样式，例如图片大小、文字样式等。