欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 入门

小程序极速实战开发《二十二》image图

发布：2018-01-25 16:27浏览： 次来源：网络 作者：tianshu

组件说明:

image,我想在应用中使用的最多的是图片了,用我的想法来形容,界面好不好看,最主要是图好不好,在小程序有一个image标签,和html的img标签是差不多的,但是还是有一点差别的,别的不逼逼了(我是一个做后台的,稍微懂一点前端的基本知识和一些框架),详细看后面的内容


组件用法：

小程序极速实战开发《二十二》image图(图1)

 

 

wxml

  1. <view class="textTitle">原图片</view>
  2. <image src="{{imgSrc}}" mode="scaleToFill"></image>
  3. <view class="page">
  4.   <view class="page__hd">
  5.     <text class="page__title">image</text>
  6.     <text class="page__desc">图片</text>
  7.   </view>
  8.   <view class="page__bd">
  9.     <view class="section section_gap" wx:for="{{array}}" wx:for-item="item">
  10.       <view class="section__title">{{item.text}}</view>
  11.       <view class="section__ctn">
  12.         <image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}"></image>
  13.       </view>
  14.     </view>
  15.   </view>
  16. </view>

js

  1. Page({
  2.   data: {
  3.     imgSrc:"https://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg",
  4.     array: [{
  5.       mode: 'scaleToFill',
  6.       text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应'
  7.     }, { 
  8.       mode: 'aspectFit',
  9.       text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'
  10.     }, { 
  11.       mode: 'aspectFill',
  12.       text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'
  13.     }, { 
  14.       mode: 'top',
  15.       text: 'top：不缩放图片，只显示图片的顶部区域' 
  16.     }, {      
  17.       mode: 'bottom',
  18.       text: 'bottom：不缩放图片，只显示图片的底部区域'
  19.     }, { 
  20.       mode: 'center',
  21.       text: 'center：不缩放图片，只显示图片的中间区域'
  22.     }, { 
  23.       mode: 'left',
  24.       text: 'left：不缩放图片，只显示图片的左边区域'
  25.     }, { 
  26.       mode: 'right',
  27.       text: 'right：不缩放图片，只显示图片的右边边区域'
  28.     }, { 
  29.       mode: 'top left',
  30.       text: 'top left：不缩放图片，只显示图片的左上边区域' 
  31.     }, { 
  32.       mode: 'top right',
  33.       text: 'top right：不缩放图片，只显示图片的右上边区域'
  34.     }, { 
  35.       mode: 'bottom left',
  36.       text: 'bottom left：不缩放图片，只显示图片的左下边区域'
  37.     }, { 
  38.       mode: 'bottom right',
  39.       text: 'bottom right：不缩放图片，只显示图片的右下边区域'
  40.     }],
  41.     src: 'https://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg'
  42.   },
  43.   imageError: function(e) {
  44.     console.log('image3发生error事件，携带值为', e.detail.errMsg)
  45.   }
  46. })

主要属性：
属性
类型
默认值
说明
src String   图片资源地址
mode String scaleToFill等 图片裁剪、缩放的模式
binderror HandleEvent   当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: ‘something wrong’}
bindload HandleEvent   当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:’图片高度px’, width:’图片宽度px’}

注：image组件默认宽度300px、高度225px

mode有12种模式，其中3种是缩放模式，9种是裁剪模式。

3种缩放模式


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

9种裁剪模式


裁剪模式
说明
top 不缩放图片，只显示图片的顶部区域
bottom 不缩放图片，只显示图片的底部区域
center 不缩放图片，只显示图片的中间区域
left 不缩放图片，只显示图片的左边区域
right 不缩放图片，只显示图片的右边区域
top left 不缩放图片，只显示图片的左上边区域
top right 不缩放图片，只显示图片的右上边区域
bottom left 不缩放图片，只显示图片的左下边区域
bottom right 不缩放图片，只显示图片的右下边区域





免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有