【快应用】如何动态设置渐变色样式

​

 现象描述:

快应用中在<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

​