1、背景图片设置可以用服务器上的图片。
2、也可以将本地图片转成base64的。
wxml:
<view class="topview-left" style="background-image: url({{background}});mode='scaleToFill'"/>
js:
data: {
background: "/style/images/icon_coupon_backgroud.png",
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
//设置背景图片
let base64 = wx.getFileSystemManager().readFileSync(this.data.background, 'base64');
this.setData({
'background': 'data:image/png;base64,' + base64
});
//设置导航栏标题
wx.setNavigationBarTitle({
title: '下发优惠券'
});
},
wxss:
.topview-left {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 30%;
height: 113px;
background-repeat: no-repeat; /** 不重复*/
background-size: 100% 100%;
background-image: url('data:image/png;base64,base64码'); /** 添加背景图片的*/
}
3、也可以直接设置定位实现。
<view style="display: flex; align-items: center;text-align:center;justify-content: center;margin-bottom:10px;">
<image src="/pagesChronic/images/icon_case_background.png" style="height:26px;width:167px;position:absolute;"></image>
<text style="position: relative;color:#FF9721;">评价</text>
</view>
效果：
