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

这篇具有很好参考价值的文章主要介绍了uniapp中微信小程序不能编译style绑定方法的解决方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

uniapp中动态style问题

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

小程序style标签,css3,微信小程序,uni-app,小程序

这两个方法我都写在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模拟器的效果是一样的如图

小程序style标签,css3,微信小程序,uni-app,小程序

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

小程序style标签,css3,微信小程序,uni-app,小程序

解决方案

第一步

小程序style标签,css3,微信小程序,uni-app,小程序

第二步在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;
				}
			},
		},

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

小程序style标签,css3,微信小程序,uni-app,小程序

注意事项
我本来是参照methods方法复制到computed中的，但是发现返回的color=‘background:#123C7F’,可是并没有效果。于是对方法进行了重写，重新定义了一个style={}对象返回值就是对象形式 { color: ‘#123C7F’ }就可以正常显示，一定要返回对象的形式。文章来源地址https://www.toymoban.com/news/detail-596182.html

到了这里，关于uniapp中微信小程序不能编译style绑定方法的解决方案的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！