公众号:柏战不殆(Baiman_Ber)
//index.js
Page({
data:{
src:'../images/公众号.jpg',
data:'点击我呀'
},
//点击事件
click:function(){
this.setData({
data:'你学会了吗'
})
}
})
<!--index.wxml-->
<view>
<view bindtap='click'>{{data}}</view>
<view>
<image mode='aspectFit' src='{{src}}'></image>
<text>微信公众号:柏战不殆(Baiman_Ber)</text>
</view>
</view>
image组件默认宽度为300px,高度为225px,mode属性表示图片缩放的方式。有以下四种。
scaleToFill:不保持纵横比缩放图片,使图片的宽高完全拉伸至填满image元素。
aspectFit:保持纵横比缩放图片,使图片的长边能完全显示出来,也就是说,可以完整地将图片显示出来。
aspectFill:保持纵横比缩放图片,只保证图片的短边能完全显示出来,也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
widthFix:宽度不变,高度自动变化,保持原图宽高比不变。