微信小程序--swiper组件

Posted 2020-11-12 changedman

<view class=‘swiper-container‘>
<swiper indicator-dots="true"
  autoplay="true" interval="5000" vertical="{{false}}" class=‘swiper‘ class=‘aaa‘>
  <block wx:for="{{imgUrls}}"> 
    <swiper-item >
      <image src="{{item}}"class="slide-image" style=‘width:100%;height:100%‘/>
    </swiper-item>
  </block>
</swiper>
</view>

刚刚练习布局使用了一下swiper容器；

遇到的问题：1.外层嵌套<view class=‘container‘></view>该组件不显示；

                      2.在iphone5显示是宽度占满屏幕的；换了更大屏幕占不满，右边有空隙；

解决办法：1通过实验这个组件外层就是不能嵌套<view class=‘container‘></view>，但是把class改成其他就可以正常显示；

                   这是因为app.wxss中全局规定了container的样式把它删了就可以正常显示了（艹，这是重点啊）；

                  2改<image>的宽和高是不能使该组件宽度占满屏i幕的，要改外层的<view>或直接改<swiper>的width为100%；这样无论在什么屏幕都可以占满了；

                  3改<swiper-item>的属性没什么卵用使图片占满每个item完全显示,要设置image的宽和高都为100%，但是图片大小不合适会变形；

补充：<image>组件的mode属性，可以控制图片的缩放；

scaleToFill    不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit    保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill    保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix    宽度不变，高度自动变化，保持原图宽高比不变