制作一个人物介绍界面

制作一个人物介绍界面

运用image组件显示人物照片

1.熟悉image组件的属性列表

属性 类型 说明 src string 图片资源地址 mode string 图片裁剪、缩放的模式 webp boolean 默认不支持webP格式 lazy-load boolean 图片懒加载，在即将进入一定范围（上下三屏）时才开始加载 show-menu-by-longpress boolean 开启长按图片显示识别小程序码菜单 binderror eventhandle 当错误发生时触发，event.detail = {errMsg} bindload eventhandle 当图片载入完毕时触发，event.detail = {height, width}

mode 的合法值

mode值 说明 scaleToFill 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 top 裁剪模式，不缩放图片，只显示图片的顶部区域 bottom 裁剪模式，不缩放图片，只显示图片的底部区域 center 裁剪模式，不缩放图片，只显示图片的中间区域 left 裁剪模式，不缩放图片，只显示图片的左边区域 right 裁剪模式，不缩放图片，只显示图片的右边区域 top left 裁剪模式，不缩放图片，只显示图片的左上边区域 top right 裁剪模式，不缩放图片，只显示图片的右上边区域 bottom left 裁剪模式，不缩放图片，只显示图片的左下边区域 bottom right 裁剪模式，不缩放图片，只显示图片的右下边区域

2.示例代码

（1）introdution.js:

Page({
          
   
  data: {
          
   
    array: [{
          
    
      mode: scaleToFill //给mode值赋值，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素	
    }],
    src: https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=77026cc9cafc1e17e9b284632bf99d66/0bd162d9f2d3572c257447038f13632763d0c35f.jpg 
    // 绑定图片的地址
  },
    imageError: function (e) {
          
   
    console.log(image发生error事件，携带值为, e.detail.errMsg) //发生错误时触发该事件
  }
})

（2）introdution.json:

{
          
   
  "navigationBarTitleText": "xxx介绍" /*页面标题*/
}

（3）introdution.wxml:

<view class="page"> 
<view class="page__bdup">
    <view class="section_gap" wx:for="{
          
   {array}}" >
      <view class="section__ctn">
        <image style="width: 200px; height: 150px; background-color: #eeeeee;" mode="{
          
   {array.mode}}" src="{
          
   {src}}"></image> /*设置图片的样式*/
      </view>
    </view>
  </view>
<view class="page__bddn">
<text class="title">个人介绍</text>
</view>
</view>

（4）introdution.wxss:

.page{
          
   
flex-direction: column; /*纵向排列*/
display: flex;
}
.page__bdup{
          
     
  text-align:center; /*图片居中*/
}
.page__bddn{
          
     
  margin: 10px;  /*设置与图片的间隔*/
  height: 400px;  /*设置边框的长度*/
  text-align:center;  /*文字居中*/
  border:1px solid  #000000;  /*设置边框及颜色*/
}

3.效果展示