vueトップコンポーネントに戻る

6315 ワード
  
    
  


<span style="color:#bababa;">type=</span><span style="color:#a5c261;">"text/ecmascript-6"</span><span style="color:#e8bf6a;">>
</span><span style="color:#e8bf6a;">  </span><span style="color:#cc7832;"><strong>export default </strong></span>{
    <span style="color:#ffc66d;">data</span>() {
      <span style="color:#cc7832;"><strong>return </strong></span>{
        <span style="color:#9876aa;">backTopShow</span>:<span style="color:#cc7832;"><strong>false
</strong></span><span style="color:#cc7832;"><strong>      </strong></span>}
    }<span style="color:#cc7832;">,
</span><span style="color:#cc7832;">    </span><span style="color:#9876aa;">components</span>: {}<span style="color:#cc7832;">,
</span><span style="color:#cc7832;">    </span><span style="color:#ffc66d;">mounted</span>() {
      <span style="color:#9876aa;">window</span>.<span style="color:#ffc66d;">addEventListener</span>(<span style="color:#6a8759;">'scroll'</span><span style="color:#cc7832;">, </span><span style="color:#cc7832;"><strong>this</strong></span>.<span style="color:#ffc66d;">handleScroll</span>)
    }<span style="color:#cc7832;">,
</span><span style="color:#cc7832;">    </span><span style="color:#9876aa;">methods</span>: {
      <span style="color:#ffc66d;">backTop</span>() {
        <span style="color:#cc7832;"><strong>let </strong></span>back = <span style="color:#ffc66d;">setInterval</span>(() => {
          <span style="color:#cc7832;"><strong>if</strong></span>(document.body.<span style="color:#9876aa;">scrollTop</span>||document.documentElement.<span style="color:#9876aa;">scrollTop</span>){
            document.body.<span style="color:#9876aa;">scrollTop</span>-=<span style="color:#6897bb;">100</span><span style="color:#cc7832;">;
</span><span style="color:#cc7832;">            </span>document.documentElement.<span style="color:#9876aa;">scrollTop</span>-=<span style="color:#6897bb;">100</span><span style="color:#cc7832;">;
</span><span style="color:#cc7832;">          </span>}<span style="color:#cc7832;"><strong>else </strong></span>{
            <span style="color:#ffc66d;">clearInterval</span>(back)
          }
        })<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">      </span>}<span style="color:#cc7832;">,
</span><span style="color:#cc7832;">      </span><span style="color:#ffc66d;">handleScroll</span>(){
        <span style="color:#cc7832;"><strong>if </strong></span>(document.documentElement.<span style="color:#9876aa;">scrollTop </span>+ document.body.<span style="color:#9876aa;">scrollTop </span>> <span style="color:#6897bb;">100</span>) {
          <span style="color:#cc7832;"><strong>this</strong></span>.<span style="color:#9876aa;">backTopShow</span>=<span style="color:#cc7832;"><strong>true</strong></span><span style="color:#cc7832;">;
</span><span style="color:#cc7832;">        </span>}
        <span style="color:#cc7832;"><strong>else </strong></span>{
          <span style="color:#cc7832;"><strong>this</strong></span>.<span style="color:#9876aa;">backTopShow</span>=<span style="color:#cc7832;"><strong>false</strong></span><span style="color:#cc7832;">;
</span><span style="color:#cc7832;">        </span>}
      }
    }
  }
<span style="color:#e8bf6a;">
JSプログラマー/ベストアルバム
DockerとDockerは、Ubuntu