微信小程序动态绑定style样式

homeOutObj.color是你js文件里面设置的颜色,可以根据用户操作改变值,达到动态渲染效果,如果样式比较复杂的话建议绑定动态class

传送门:绑定动态class

第一种,通过变量值直接绑定样式:

JS:

data: {
	homeOutObj: {
	    color:'red',
	    fontSize:'14rpx'
	}
}

changStyle() { // 通过js方法动态改变绑定的style样式
    this.setData({
        homeOutObj: {
			color:'blue',
	    	fontSize:'16rpx'
 		}
    })
},

WXML:

<view class="tab-header">
    <view style="background:{{homeOutObj.color}};font-size:{{homeOutObj.fontSize}}">内容区域view>
view>

第二种,写个三目运算符,根据变量实现动态绑定样式

JS:

data: {
	showRed: true
}

changData() { // 通过js方法动态改变绑定的变量
	if(this.data.showRed) {
		this.setData({
	        showRed: false
	    })
	}else {
	    this.setData({
	        showRed: true
	    })
	}
},

showRed为true时,显示红色,否则显示蓝色

<view class="tab-header">
    <view style="background:{{showRed? 'red' : 'blue'}}" >内容区域view>
view>

你可能感兴趣的:(小程序,小程序,css)