在uniapp中的背景图需要动态变换 一般结合后台返回数据渲染

很简单 但是每次都记不住 自己写写加深印象

这里是简单的html 代码

<view class="loginBg" :style="{backgroundImage: 'url(' + imageURL + ')',
  'background-repeat':'no-repeat', backgroundSize:'100% 100%'}">										
</view>

这里需要在data中定义一下

export default {
		data() {
			return {
			//此处如果是写死图片 可以直接像我这样写上 如果要拿后台渲染也可以直接空白 不写图片地址 
			//我在这里写上 如果后台没有返回图片 我可以只写显示这张默认图片
				imageURL:'http://sjbz.fd.zol-img.com.cn/t_s1080x1920c/g3/M02/0E/0D/ChMlV17oT-6IZ0ZcACCEJ-b0kqYAAU0mQJzD-4AIIQ_684.jpg',
			};
		},
	}

这里是我去请求后台数据返回图片

// 获取背景图
		backgroundMap(){
		//[这里是我直接封装的请求组件地址](https://editor.csdn.net/md/?articleId=107078839)
			this.$apiReq.req({ // 创建对象
				url: '/ui/shop/banner/list', // 示例请求路径
			    method:"get",
				data : {
				},
				success: (res) => {
				    //后台返回指定的图片 这边直接渲染就可以了
					this.imageURL=res.data.rows[2].bannerImg
				},
			 })
		}
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐