<!--pages/index2/index.wxml-->

<scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">

  <view id="demo1" class="sitem">{{bd[0]}}</view>

  <view id="demo2" class="sitem">{{bd[1]}}</view>

  <view id="demo3" class="sitem">{{bd[2]}}</view>

  <view id="demo3" class="sitem">{{bd[3]}}</view>

  <view id="demo3" class="sitem">{{bd[4]}}</view>

  <view id="demo3" class="sitem">{{bd[5]}}</view>

  <view id="demo3" class="sitem">{{bd[6]}}</view>

</scroll-view>

<view class="topback"></view>

<view class="viewswiper">

  <swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

    <block wx:for="{{background}}" wx:key="*this">

      <swiper-item>

        <view class="swiper-item {{item}}">

          <image class="image" src="{{item}}" />

        </view>

      </swiper-item>

    </block>

  </swiper>

</view>

/* pages/index2/index.wxss */

.scroll-view_H{

  white-space: nowrap;

  background-color: rgb(0, 255, 136);

}

/* .scroll-view_H的background-color与.sitem的background-color均设置为红色，为了中间没空隙 */

.sitem{

  display: inline-block;

  width: 20%;

  height: 80rpx;

  background-color: rgb(76, 0, 255);

  margin-left: 10rpx;

  text-align: center;

  line-height: 80rpx;

}

.topback{

  background-color: rgb(255, 0, 0);

  height: 200rpx;

  border-radius: 0 0 5% 5%;

}

.swiper-item{

  height: 100%;

  width: 100%;

  border-radius: 50rpx;

  background-color: blueviolet;

}

.image{

  background-color: aqua;

  border-radius: 50rpx;

}

.viewswiper{

  margin-top: -120rpx;

  height: 600rpx;

  border-radius: 50rpx;

}

.swiper{

  width: 90%;

  margin: 0 auto;

  background-color: rgb(0, 255, 55);

}