小程序：图片和轮播组件

来自CloudWiki
跳转至： 导航， 搜索

图片组件

image

图片。支持JPG、PNG、SVG格式，2.3.0 起支持云文件ID。

介绍

image组件的默认宽高为300px * 225px，

且image组件中的二维码图片不支持长按识别 

<image style="width:50%;" src="../images/2.png" mode="widthFix" ></image>

缩放模式

  • scaleToFill 不保持纵横比例缩放图片，使图片的高度完全拉伸至填满image元素

       此模式是缩放的默认模式，缺省时，小程序以此模式来缩放图片

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

————————————————

原文链接：https://blog.csdn.net/Mikowoo007/article/details/84329630

代码： 

<image style="width:475rpx;height:150rpx"  src="/img/flower.webp"  mode="scaleToFill" />
<image style="width:475rpx;height:150rpx"  src="/img/flower.webp"  mode="aspectFit" />
<image style="width:475rpx;height:150rpx"  src="/img/flower.webp"  mode="aspectFill" />
<image style="width:475rpx;height:150rpx"  src="/img/flower.webp"  mode="widthFix" />

裁剪模式

  • top 不缩放图片，只显示图片的顶部区域
  • bottom 不缩放图片，只显示图片的底部区域
  • center 不缩放图片，只显示图片的中间区域
  • left 不缩放图片，只显示图片的左边区域
  • right 不缩放图片，只显示图片的右边区域
  • top left 不缩放图片，只显示图片的左上角区域
  • top right 不缩放图片，只显示图片的右上角区域
  • bottom left 不缩放图片，只显示图片的左下角区域
  • bottom right 不缩放图片，只显示图片的右下角区域

示例代码

<view class="page">
  <view class="page__hd">
    <text class="page__title">image</text>
    <text class="page__desc">图片</text>
  </view>
  <view class="page__bd">
    <view class="section section_gap" wx:for="{{array}}" wx:for-item="item">
      <view class="section__title">{{item.text}}</view>
      <view class="section__ctn">
        <image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}"></image>
      </view>
    </view>
  </view>
</view>

Page({
  data: {
    array: [{
      mode: 'scaleToFill',
      text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应'
    }, {
      mode: 'aspectFit',
      text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'
    }, {
      mode: 'aspectFill',
      text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'
    }, {
      mode: 'top',
      text: 'top：不缩放图片，只显示图片的顶部区域'
    }, {
      mode: 'bottom',
      text: 'bottom：不缩放图片，只显示图片的底部区域'
    }, {
      mode: 'center',
      text: 'center：不缩放图片，只显示图片的中间区域'
    }, {
      mode: 'left',
      text: 'left：不缩放图片，只显示图片的左边区域'
    }, {
      mode: 'right',
      text: 'right：不缩放图片，只显示图片的右边边区域'
    }, {
      mode: 'top left',
      text: 'top left：不缩放图片，只显示图片的左上边区域'
    }, {
      mode: 'top right',
      text: 'top right：不缩放图片，只显示图片的右上边区域'
    }, {
      mode: 'bottom left',
      text: 'bottom left：不缩放图片，只显示图片的左下边区域'
    }, {
      mode: 'bottom right',
      text: 'bottom right：不缩放图片，只显示图片的右下边区域'
    }],
    src: '../resources/cat.jpg'
  },
  imageError: function(e) {
    console.log('image3发生error事件，携带值为', e.detail.errMsg)
  }
})


swiper组件

滑块视图容器，通常用来表示轮播图。

其中只可放置swiper-item组件，否则会导致未定义的行为。

swiper-item

仅可放置在swiper组件中，宽高自动设置为100%。

index.js 

Page({
    data:{
        background:['a','b','c']
},

index.wxml 

.si{
    display:block;
    height:150px;
}
.a{
    background-color:yellow;    
}
.b{
    background-color:red;
}
.c{
    background-color:blue;
}

index.wxss 

<view>
    <swiper autoplay="true" interval="2000"
    indicator-dots="true">
    <block wx:for="{{background}}" wx:key='swip'>
        <swiper-item>
            <view class='si {{itme}}'></view>
        </swiper-item>
    </block>
    </swiper-item>
</view>
取自“http://www.openbrains.net/mediawiki/index.php?title=小程序：图片和轮播组件&oldid=29799”