小程序基本布局

<swiper class="swiper1" indicator-dots autoplay interval="2000" circular="">
<!--图片轮播-->
  <swiper-item>
    <view>A</view>
  </swiper-item>
  <swiper-item>
    <view>B</view>
  </swiper-item>
  <swiper-item>
    <view>C</view>
  </swiper-item>
  </swiper>
  <view style="height: 10px;"></view>
  <!--水平分布-->
  <view class="container1">
    <view>A</view>
    <view>B</view>
    <view>C</view>
  </view>
  <view style="height: 10px;"></view>
  <!--垂直滚动-->
  <scroll-view class="y-scroll" scroll-y>
    <view>A</view>
    <view>B</view>
    <view>C</view>
  </scroll-view>

.swiper1
{
  height: 20vh;
}
swiper-item view{
  height: 100%;
  line-height: 20vh;
  text-align: center;
}
swiper-item:nth-child(1)
{
  background-color: lightblue;
}
swiper-item:nth-child(2)
{
  background-color:lightgreen;
}
swiper-item:nth-child(3)
{
  background-color:lightpink;
}
.container1
{
  display: flex;
  justify-content: space-around;
}
.container1 view
{
  width: 30vw;
  height: 10vh;
  text-align: center;
  line-height: 10vh;
}
.container1 view:nth-child(1)
{
  background-color: lightblue;
}
.container1 view:nth-child(2)
{
  background-color:lightgreen;
}
.container1 view:nth-child(3)
{
  background-color:lightpink;
}
.y-scroll
{
  border: 1px solid gray;
  width: 30vw;
  height: 50vh;
}
.y-scroll view{
  width: 30vw;
  height: 30vh;
  text-align: center;
  line-height: 30vh;
}
.y-scroll view:nth-child(1)
{
  background-color: lightblue;
}
.y-scroll view:nth-child(2)
{
  background-color:lightgreen;
}
.y-scroll view:nth-child(3)
{
  background-color:lightpink;
}