问题描述:
很多时候单色的背景满足不了我开发花里胡哨的需求,使用图片开发又出现各种问题,问题有但不限:
1.图片无法覆盖到整个屏幕
2.图片图像就是不在中间
3.图片把组件挡住了
4.图片没挡住组件但是影响了事件的触发
5.图片没到背后去反而成为页面组件展示的一部分
6.等等
我们先看下解决问题的预览:
一堆问题一个对策,上代码!
视图层代码,wxml:
<view>
<image class = "bk" src='/image/background.jpg' mode="aspectFill" ></image>
</view>
视图层的层叠样式设计wcss:
.bk{
width: 100%;
height:100%;
position:fixed;
background-size: 100% 100%;
z-index:-1;
}
注意:
1.组件必须位于wxml最上方。
2.如果没能位于图层最下面,更改z-index属性绝对值为更大的数。
3.如果逻辑不能独立,可以用block块包裹。
补:有些人可能也不会纯色的,纯色不需要视图层组件设置,直接层叠样式设计即可。
代码是:
page{
background-color:#99CCFF;
}
上个示例图:
后记:
看了我直接小程序概念理解的都知道小程序包上传是有大小限制的,这些图片还是放到云端然后使用数据绑定显示更好。
解决方案:
在js页面下载为data
data: {
notInMotto :"必须登陆才可以浏览失物信息",
userInfo: {},
schoolBackground:"cloud://mychd-find-4s9do.6d79-mychd-find-4s9do-1301544649/系统媒体文件/长大背景/校本部教学楼.jpg"
},
在前端页面用数据绑定实现展示:
<view>
<image class="backgroundPic" src='{{schoolBackground}}' mode="aspectFill"></image>
</view>
前端css代码:
.backgroundPic{
width: 100%;
height:100%;
position:fixed;
background-size: 100% 100%;
z-index:-1;
}
要感谢最帅的lby同学成功解决了我们队参赛时的这个开发问题,之前我的图片一直被当成组件显示,也不能达到好的覆盖模式,lby赛高!