生放送ソフトウェア開発微信小プログラム:輪播図

基礎知識:
swiperラベルのデフォルトの幅と高さ:100%*150 px
swiper高さではコンテンツによる拡張が実現できません

              ，       swiper         

        ：  1125 * 352px

swiper    /  swiper    =         /       

swiper   = swiper   *        /       

height: 100vw * 352 / 1125

imageラベルにもデフォルトの幅と高さがあります:320 px*240 px
ピクチャラベルピクチャラベル:modeアトリビュートレンダリングモードmodeあとりびゅーとれんだりんぐもーど
widthFix幅は変わらず、高さは自動的に変化し、元の図の幅の高さ比は変わらずscaleToFillはアスペクト比の拡大画像を維持せず、画像の幅をimage要素aspectFitを満たすまで完全に伸ばしてアスペクト比の拡大画像を維持し、画像の長辺を完全に表示することができる.(ページの輪番図はよく使います)怠け者のロードをサポートします:小さいプログラムの中のピクチャーは直接怠け者のロードlazy-loadをサポートします
Lazy-loadは、ビューポートの上下3画面の高さ内に画像が表示されたときに自分が画像をロードし始めると判断します.
デザイン画像と輪番図:
原図の幅:750 px*340 pxアイデア:画像の高さを適応させる;幅100%

<!--     -->
  <view class="index_swiper">
    <swiper autoplay="{{true}}" indicator-dots="{{true}}" circular="{{true}}">
      <swiper-item wx:for="{{swiperList}}" wx:key="goods_id">
        <navigator url="{{item.navigator_url}}" hover-class="navigator-hover" open-type="navigate">
          <image src="{{item.image_src}}" mode="widthFix" lazy-load="false" />
        </navigator>
      </swiper-item>
    </swiper>
  </view>

.index_swiper {
  // swiper   ：     
  swiper{
    width: 750rpx;
    height: 340rpx;
    image{
      width: 100%;
    }
  }
}