微信小程序中轮播图的使用

<!-- 轮播渲染 -->

<view class="index_swiper">

<!-- 

  1.swiper标签存在默认的高度和宽度100%*150px

  2.image也存在默认的高度和宽度320px*240px

  3.设计图片和轮播图

      3.1先看原图的宽高750*340

      3.2图片高度自适应 宽度 等于100%

  4.图片的标签

        mode属性  渲染模式

        widthFix 让图片的宽和高等比例发生变化

 -->

  <swiper>

      <swiper-item wx:for="{{swiperlists}}">

        <view><image mode="widthFix" src="{{item.image_src}}"/></view>

      </swiper-item>

  </swiper>

</view>

 

 

 

.index_swiper{

    swiper{

        width: 750rpx;

        height: 340rpx;

        image{

            width: 100%;

 

        }

    }

}