1、CSS3样式属性(背景图片自适应)
语法 =>background-size :[ <length> | <percentage> | auto ]{1,2} | cover | contain;
作用 => 设置背景图片尺寸
示例 => background-size:50px,50px;(背景图片宽度为50px,高度为50px)
2、小程序设备信息API
语法 => wx.getSystemInfo(Object)
作用 => 获取手机屏幕的宽度和高度,以及其他设备信息(详情请参考小程序官方开发文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/systeminfo.html#wxgetsysteminfoobject)
示例 =>
var that=this;
//小程序设备信息API
wx.getSystemInfo({
success: function(res) {
that.setData({
//获取屏幕宽度
windowWidth:res.windowWidth,
//获取屏幕高度
windowHeight:res.windowHeight
})
}
})
1、定义view为背景显示标签,设置其样式属性width(标签宽度)、height(标签高度)、background/background-image(背景图片url)、background-size(背景图片尺寸)
2、数据绑定width、height、background-size
3、调用wx.getSystemInfo(Object)获取手机屏幕的宽度和高度,将屏幕宽度赋值给width和background-size的width,将屏幕高度赋值给height和background-size的height
注:
background/background-image示例=>background: url(" http://images/image.png");
若view标签的height为0px,则会出现背景图片不显示异常。