1猿棉、背景圖片設(shè)置可以用服務(wù)器上的圖片。
2渣窜、也可以將本地圖片轉(zhuǎn)成base64的铺根。
wxml:
<view class="topview-left" style="background-image: url({{background}});mode='scaleToFill'"/>
js:
data: {
? ? background: "/style/images/icon_coupon_backgroud.png",
? },
/**
? * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
? */
? onLoad: function(options) {
? ? //設(shè)置背景圖片
? ? let base64 = wx.getFileSystemManager().readFileSync(this.data.background, 'base64');
? ? this.setData({
? ? ? 'background': 'data:image/png;base64,' + base64
? ? });
? ? //設(shè)置導(dǎo)航欄標(biāo)題
? ? wx.setNavigationBarTitle({
? ? ? title: '下發(fā)優(yōu)惠券'
? ? });
? },
wxss:
.topview-left {
? display: flex;
? flex-direction: column;
? align-items: center;
? justify-content: center;
? width: 30%;
? height: 113px;
? background-repeat: no-repeat; /** 不重復(fù)*/
? background-size: 100% 100%;
? background-image: url('data:image/png;base64,base64碼'); /** 添加背景圖片的*/
}
3、也可以直接設(shè)置定位實(shí)現(xiàn)乔宿。
? ? ? ? ?<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;">評(píng)價(jià)</text>
? ? ? ? ? ?</view>
效果：
