微信小程序-轮播图

1. 官网属性学习
   传送门
2. 参照官网实现轮播图

-在index.wxml中添加轮播图代码

<!--index.wxml-->
<view class="contain">
  <swiper circular="true" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-active-color="{{bg}}">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" mode="widthFix"/>  
      </swiper-item>
    </block>
  </swiper>
</view>

• 在index.js中添加轮播图的属性和图片

data: {
    imgUrls: [
      'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3647005594,2489035644&fm=15&gp=0.jpg',
      'http://img5.imgtn.bdimg.com/it/u=3984301384,4048924157&fm=26&gp=0.jpg',
      'http://img1.imgtn.bdimg.com/it/u=3696432146,4082347851&fm=26&gp=0.jpg',
      'http://img1.imgtn.bdimg.com/it/u=2642623337,3352175910&fm=26&gp=0.jpg',
      'http://img1.imgtn.bdimg.com/it/u=2532824253,1582740532&fm=26&gp=0.jpg',
      'http://img1.imgtn.bdimg.com/it/u=2027971476,2078210401&fm=26&gp=0.jpg'
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1300,
    bg: '#C79C77'
  },

3. 看一下效果
   
   原图
   
   因此我们就需要设置轮播图的高度以适应不同的分辨率的图片：
4. 设置轮播图的高度自适应
   修改代码
   index.wxml

<swiper circular="true" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-active-color="{{bg}}" style='height:{{Height}}'>
   <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" mode="widthFix" bindload='imgHeight'/>  
    </swiper-item>
   </block>
</swiper>

index.js

,
  imgHeight: function (e) {
    var winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度
    var imgh = e.detail.height;//图片高度
    var imgw = e.detail.width;//图片宽度
    var swiperH = winWid * imgh / imgw + "px"
    //等比设置swiper的高度。 即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度  ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度
    this.setData({
      Height: swiperH//设置高度
    })
  }

5. 看一下效果
   
   好像还差点意思
6. 设置一下图片的属性

.slide-image {
  width:100%;
  height:100%;
  position:  absolute
}

 <image class='slide-image' src="{{item}}" class="slide-image" mode="widthFix" bindload='imgHeight'/>  

7. ok 看一下结果