zoukankan      html  css  js  c++  java
  • 十一:image 图片

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

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

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

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

    裁剪模式

    模式说明
    top 不缩放图片,只显示图片的顶部区域
    bottom 不缩放图片,只显示图片的底部区域
    center 不缩放图片,只显示图片的中间区域
    left 不缩放图片,只显示图片的左边区域
    right 不缩放图片,只显示图片的右边区域
    top left 不缩放图片,只显示图片的左上边区域
    top right 不缩放图片,只显示图片的右上边区域
    bottom left 不缩放图片,只显示图片的左下边区域
    bottom right 不缩放图片,只显示图片的右下边区域
    这里就拷贝文档的代码好了。。image也很重要。。但是文档列出来和演示的也很齐全。
    /* ---page/test/test.wxml----*/
     
    <view>
      <view>
        <text>image</text>
        <text>图片</text>
      </view>
      <view>
        <view wx:for="{{array}}" wx:for-item="item">
          <view>{{item.text}}</view>
          <view>
            <image style=" 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}"></image>
          </view>
        </view>
      </view>
    </view>
     
    /* ---page/test/test.wxml----*/
    /* ---page/test/test.js----*/
     
    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:不缩放图片,只显示图片的右下边区域'
        }],
      },
      imageError: function(e) {
        console.log('image3发生error事件,携带值为', e.detail.errMsg)
      }
    })
     
    /* ---page/test/test.js----*/
     
     
  • 相关阅读:
    mac 外接显示屏的坑
    ssh 多秘钥管理和坑
    CircleCI 前端自动部署
    jest 事件测试
    await Vue.nextTick() 的含义分析
    Jest 里面需要注意的几个小细节
    element 库 date-picker 的 disabledDate 的坑
    jest 提示 Unexpected identifier 的解决方案
    preventDefault 和 stopPropagation
    数据库:Flask-SQLAlchemy
  • 原文地址:https://www.cnblogs.com/dandingjun/p/6088233.html
Copyright © 2011-2022 走看看