在 window 滚动条上更改 StencilJS 组件

Question

是否可以在 window 滚动时更改 StencilJS 组件的样式？

我有以下代码：

import { h } from '@stencil/core';
import { Component, Prop } from '@stencil/core'

@Component({
    tag: 'example-component',
    styleUrl: './example-component.css',
    shadow: true
})
export class ExampleComponent{
    @Prop() some_text: string;
    render(){
        return  [
          <p class="someText">{this.some_text}</p>,
          <script type="text/javascript">
            var text = document.querySelector(".someText");
            window.addEventListener('scroll', function(e) {
              text.classList.add("newClassName")
            });
          </script>
        ]
    }
}

而且它不起作用。我想在 window 滚动时向文本添加一个新的 class，我该如何实现？

Answer 1

您的 JavaScript 代码不应成为呈现内容的一部分。

没有尝试过以下代码，但开始可能如下所示：

import { h, Listen, State, Component, Prop } from '@stencil/core';

@Component({
    tag: 'example-component',
    styleUrl: './example-component.css',
    shadow: true
})
export class ExampleComponent {
    @Prop() some_text: string;

    @State() myClass: string | undefined = undefined;

    @Listen('scroll', {target: 'window'})
    onScroll() {
       this.myClass = 'newClassName';
    }

    render() {
        return <p class={this.myClass}>{this.some_text}</p>
    }
}

对于参考，您可以查看 Stencil 文档的以下部分。

使用 JSX：https://stenciljs.com/docs/templating-jsx
内部状态：https://stenciljs.com/docs/state
事件：https://stenciljs.com/docs/events

在 window 滚动条上更改 StencilJS 组件

Change StencilJS component on window scroll

javascript

typescript

stenciljs