Question

我有以下离子html代码。

<ion-nav-bar class="backarrow-bar" style="background-color:rgba(99,99,99,.5)">
    <ion-nav-back-button class="button-clear">
        <i class="ion-chevron-left" style="color:#ffffff;text-shadow: 2px 4px 3px rgba(0,0,0,0.3);"></i>
    </ion-nav-back-button>
</ion-nav-bar>

以下代码用于更改ion-nav-bar的背景颜色。但是，背景颜色无法更改。我甚至为测试设置了用于背景颜色的内联样式，但它仍然不起作用？

.directive('headerShrink', function ($document) {
    return {
        restrict: 'A',
        link: function ($scope, $element, $attr) {
            var header = $document[0].body.querySelector('.backarrow-bar');
            var headerHeight = 44;
            $element.bind('scroll', function (e) {
                var scrollTop = e.target.scrollTop;
                var alpha = Math.min(scrollTop / 44, 1);
                // Not working
                header.style.backgroundColor = 'rgba(99,99,99,' + alpha + ')';
                // Not working either
                // ionic.requestAnimationFrame(function () { 
                //    header.style.backgroundColor = 'rgba(0,0,0,' + alpha + ')';
                // });
            });
        }
    }
})

Answer 1

您无法通过javascript直接为背景颜色指定alpha值。您可以使用本SO答案中提到的解决方案：https://stackoverflow.com/a/8179307/3878940

无法改变离子离子视图条的背景色？

1 个答案: