<!--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 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%;
}
.viewswiper{
margin-top: -120rpx;
overflow: hidden;
}
.swiper{
width: 90%;
margin: 0 auto;
}
.swiper-item{
height: 100%;
width: 100%;
border-radius: 50rpx;
background-color: blueviolet;
}
.swiper这个里面添加overflow: hidden;或者border-radius: 50rpx;