zoukankan      html  css  js  c++  java
  • 微信小程序--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='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    宽度不变,高度自动变化,保持原图宽高比不变

  • 相关阅读:
    【进阶指南学习笔记】lowbit
    POJ2288 Islands and bridges 【状态压缩,计数】
    POJ1995 Raising Modulo Numbers 快速幂
    CH0103 最短Hamilton路径 状态压缩
    【转载】bitset的用法 by 自为风月马前卒
    pytorch | A 60 MINUTE BLITZ 代码+详细注释
    NOI2019 游记
    十二省联考2019 游记
    python 从其他文件中引用函数
    HDU 6231 K-th Number
  • 原文地址:https://www.cnblogs.com/changedman/p/9149049.html
Copyright © 2011-2022 走看看