uniapp中微信小程序不能编译style绑定方法的解决方案

uniapp中动态style问题

这是我的代码设置了根据传参显示不同字体颜色和不同背景色

在这里插入图片描述

这两个方法我都写在methods中

methods: {
	// // 添加不同背景颜色
			getBackColor(val) {
			  let color = "";
			  switch (val[4]) {
			    case 0:
			      color = `background:${this.colors[0]}`;
			      break;
			    case 1:
			      color = `background:${this.colors[1]}`;
			      break;
			    case 2:
			      color = `background:${this.colors[2]}`;
			      break;
			    case 3:
			      color = `background:${this.colors[3]}`;
			      break;
			    case 4:
			      color = `background:${this.colors[4]}`;
			      break;
			  }
			  return color;
			},
			// 添加不同字体颜色
			getColor(val) {
			  let color = "";
			  switch (val[4]) {
			    case 0:
			      color = `color:${this.fontColors[0]}`;
			      break;   
			    case 1:    
			      color = `color:${this.fontColors[1]}`;
			      break;   
			    case 2:    
			      color = `color:${this.fontColors[2]}`;
			      break;   
			    case 3:    
			      color = `color:${this.fontColors[3]}`;
			      break;   
			    case 4:    
			      color = `color:${this.fontColors[4]}`;
			      break;
			  }
			  return color;
			},
}

在浏览器中H5和app模拟器的效果是一样的如图

在这里插入图片描述

在HbuildX中运行至微信开发者工具无效,并且报错如图

在这里插入图片描述

解决方案

第一步

在这里插入图片描述

第二步 在computed添加如下代码

computed: {
			// 在微信小程序端:style不生效 特殊处理
			// 添加不同背景颜色
			getBackColor() {
			//在computed中 打印 val 就是上面调用getBackColor(dayobject.calendarData)传过来的值
			  return val=> {
				let style = {};
				switch (val[4]) {
				  case 0:
				    style.backgroundColor = this.colors[0];
				    break;
				  case 1:
					style.backgroundColor = this.colors[1];
				    break;
				  case 2:
					style.backgroundColor = this.colors[2];
				    break;
				  case 3:
					style.backgroundColor = this.colors[3];
				    break;
				  case 4:
					style.backgroundColor = this.colors[4];
				    break;
				}
				return style;  
			  } 
			},
			// 添加不同字体颜色
			getColor() {
				return val => {
					let style = {};
					switch (val[4]) {
					  case 0:
					    style.color = this.fontColors[0];
					    break;   
					  case 1:    
					    style.color = this.fontColors[1];
					    break;   
					  case 2:    
					    style.color = this.fontColors[2];
					    break;   
					  case 3:    
					    style.color = this.fontColors[3];
					    break;   
					  case 4:    
					    style.color = this.fontColors[4];
					    break;
					}
					return style;
				}
			},
		},

至此修改成功,微信开发者工具运行效果如图所示

在这里插入图片描述

注意事项
我本来是参照methods方法复制到computed中的,但是发现返回的color=‘background:#123C7F’,可是并没有效果。于是对方法进行了重写,重新定义了一个style={}对象返回值就是对象形式 { color: ‘#123C7F’ }就可以正常显示 ,一定要返回对象的形式。

  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值