image组件

一、image 组件小程序里展示图片用的是image组件它最核心的就是mode属性1. 先搭个演示项目准备一张图放进项目根目录images/daxinganling.jpg然后在index.js里维护一个模式数组// index.js Page({ data: { src: /images/daxinganling.jpg, imgArray: [{ mode: scaleToFill, text: scaleToFill: 缩放模式不保持纵横比缩放图片使图片的宽高完全拉伸至填满 image 元素 }, { mode: aspectFit, text: aspectFit: 缩放模式保持纵横比缩放图片使图片的长边能完全显示出来 }, { mode: aspectFill, text: aspectFill: 缩放模式保持纵横比缩放图片只保证图片的短边能完全显示出来另一个方向会被截取 }, { mode: widthFix, text: widthFix: 缩放模式宽度不变高度自动变化保持原图宽高比不变 }, { mode: heightFix, text: heightFix: 缩放模式高度不变宽度自动变化保持原图宽高比不变 }, { mode: top, text: top: 裁剪模式不缩放图片只显示图片顶部区域。仅 Webview 支持 }, { mode: bottom, text: bottom: 裁剪模式只显示图片底部区域。仅 Webview 支持 }, { mode: center, text: center: 裁剪模式只显示图片中间区域。仅 Webview 支持 }, { mode: left, text: left: 裁剪模式只显示图片左边区域。仅 Webview 支持 }, { mode: right, text: right: 裁剪模式只显示图片右边区域。仅 Webview 支持 }, { mode: top left, text: top left: 裁剪模式只显示图片左上区域。仅 Webview 支持 }, { mode: top right, text: top right: 裁剪模式只显示图片右上区域。仅 Webview 支持 }, { mode: bottom left, text: bottom left: 裁剪模式只显示图片左下区域。仅 Webview 支持 }, { mode: bottom right, text: bottom right: 裁剪模式只显示图片右下区域。仅 Webview 支持 }] } })2. WXML 循环渲染带编号scroll-view classscrollarea scroll-y typelist view classbox view classtitle图片的不同显示模式/view block wx:for{{imgArray}} view显示模式编号{{index 1}}/view view{{item.text}}/view view classimg-layout image src{{src}} mode{{item.mode}} / /view /block /view /scroll-view 用wx:for的默认下标index加上index 1就能在每行文字上方显示显示模式编号1、2、3……方便对照。3. 样式WXSS/* app.wxss */ .box { margin: 20rpx; padding: 20rpx; border: 2rpx solid silver; } .title { font-size: 40rpx; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: red; } /* index.wxss */ .img-layout { text-align: center; margin-top: 20rpx; margin-bottom: 40rpx; } image { width: 480rpx; height: 480rpx; background-color: #eee; }4. 两种模式怎么选缩放模式图片会按规则伸缩填满容器。scaleToFill会变形拉伸aspectFit完整显示但可能留白aspectFill铺满但会裁边widthFix/heightFix按单边自适应。裁剪模式top / bottom / center / left / right 及四角组合不缩放只显示图片的某个区域而且仅 Webview 引擎支持。二、Skyline 引擎性能虽香兼容要命1. Skyline 和 WebView 到底差在哪小程序有两套渲染引擎引擎特点适用场景skyline新一代引擎长列表滚动、动画流畅性能更好新项目、重交互、追求性能webview传统引擎兼容性最好老样式组件都能跑老项目、遇到兼容 bug性能上 Skyline 更香但它对CSS 兼容性和部分原生组件和旧 WebView 有差异。2. 怎么全局切回 WebView打开项目根目录的app.json找到renderer字段改成webview{ pages: [pages/index/index], window: { navigationBarTextStyle: black, navigationStyle: custom }, style: v2, renderer: webview, rendererOptions: {} }