【快应用】如何动态设置渐变色样式
现象描述:
快应用中在<template>动态设置渐变色样式不生效，问题代码如下：
<div class="wrapper" style="background:linear-gradient({{gradient}});"></div>
问题分析
快应用中渐变色样式不支持在style中绑定变量来动态修改.
解决方法
可以通过动态改变class类名的方式来设置渐变色样式。
示例代码
<template>
<!-- Only one root node is allowed in template. -->
<div class="container">
<div class="{{gradient}}">
<text class="title">{{ gradient }}</text>
</div>
<input class="button" type="button" onclick="click($idx)" value="{{$item}}" for="{{list}}" />
</div>
</template>
<style>
.container {
flex-direction: column;
justify-content: center;
align-items: center;
}
.button {
width: 250px;
margin-top: 10px;
background-color: #00ced1;
border-radius: 10px;
}
.redtoblue {
background: linear-gradient(red, blue);
}
.redtogreen {
background: linear-gradient(red, green);
}
.bluetogreen {
background: linear-gradient(blue, green);
}
.redtoyellow {
background: linear-gradient(red, yellow);
}
.yellowtogreen {
background: linear-gradient(yellow, green);
}
.bluetoyellow {
background: linear-gradient(blue, yellow);
}
.title {
font-size: 100px;
}
</style>
<script>
module.exports = {
data: {
gradient: 'redtoblue',
list: ["redtogreen", "bluetogreen", "redtoyellow", "yellowtogreen", "bluetoyellow", "redtoblue"]
},
onInit() {
this.$page.setTitleBar({
text: 'menu',
textColor: '#ffffff',
backgroundColor: '#007DFF',
backgroundOpacity: 0.5,
menu: true
});
},
click(index) {
this.gradient = this.list[index]
}
}
</script>
实现效果如下：
欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh
