微信小程序展示动态背景图(含三目运算符)

您所在的位置：网站首页 › 爱心动态背景图片feleyim › 微信小程序展示动态背景图(含三目运算符)

微信小程序展示动态背景图(含三目运算符)

2023-08-06 13:15| 来源: 网络整理| 查看: 265

微信小程序展示背景图片一、微信小程序展示背景图片的类型二、语法书写1、简单展示2、动态背景图片

一、微信小程序展示背景图片的类型

当在小程序开发中，本地的背景图片也是可以展示的，但是在真机运行的时候，必须使用base64格式或者是服务器上的图片才能显示。

给大家找了个在线图片转换链接：上传图片转换base64格式图片

二、语法书写 1、简单展示

在wxss文件中，对相应的容器进行添加背景图片

background-image: url("data:image/jpg;base64,/9j/4QAYRX...."); 或者 background-image: url('https://img-market.csdnimg.cn/aicms/fission/1608260868727976.jpg')

我建议大家使用线上的地址更好些，当然这只是简单的显示，如果开发需要的话，肯定要动态的根据数据设置不同的背景图片

2、动态背景图片 style="background:{{safeData.score>89?'url('+urlheader+'/public/xcc/dp-1.png) no-repeat' :safeData.score>79?'url('+urlheader+'/public/xcc/dp-2.png) no-repeat' :'url('+urlheader+'/public/xcc/dp-3.png) no-repeat'}}; background-size: 360rpx 240rpx;color:#fff;"

safeData.score是分数的值，urlheader则是服务器ip地址

需要设置更多种类型的背景图片，就可以采用动态类书写了。

到此为止，微信小程序展示背景图片就完成了，大家学到了嘛~

【本文地址】

微信小程序展示动态背景图(含三目运算符)

微信小程序展示动态背景图(含三目运算符)

今日新闻

推荐新闻