制作一个人物介绍界面

制作一个人物介绍界面

运用image组件显示人物照片

参考微信开放文档 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.效果展示