仿bilibili微信小程序2

輪播圖
wxml

<view class="slides">
   <swiper autoplay indicator-dots circular>
    <swiper-item wx:for="{{swiperList}}" wx:key="{{index}}">
    <navigator>
    <!--Widthfix 寬度不變，高度自動變化，保持原圖寬高比不變。-->
    <image mode="widthFix"  src="{{item.imgSrc}}"  />
    </navigator>
    </swiper-item>
    </swiper>
  </view>

wxss修飾

.slides{
margin-top: 10rpx;
}
.slides swiper{
height:220rpx;
}
.slides navigator{
width: 100%;
height: 100%;
}