仿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%;
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章