微信小程序--swiper组件

<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    宽度不变,高度自动变化,保持原图宽高比不变

 

微信小程序--swiper组件

上一篇:小黑式烂代码之微信APP支付 + 退款(JAVA实现)


下一篇:微信支付java