>  기사  >  웹 프론트엔드  >  reac은 피부색을 변경하는 기능을 어떻게 구현하나요?

reac은 피부색을 변경하는 기능을 어떻게 구현하나요?

不言
不言원래의
2018-08-13 15:32:481766검색

이 글의 내용은 Reac에서 피부색 변경 기능을 구현하는 방법에 대한 내용입니다. 참고가 필요한 친구들에게 도움이 되었으면 좋겠습니다.

1. 목표

사용자가 선택할 수 있는 여러 가지 테마 색상을 제공하고, 사용자의 선택에 따라 애플리케이션의 테마 색상을 변경합니다.

reac은 피부색을 변경하는 기능을 어떻게 구현하나요?2. 구현 원칙

다양한 테마 색상

2. 로컬 캐시에 사용자 선택 기록

3. 애플리케이션에 들어갈 때마다 캐시를 ​​읽고 캐시된 정보를 기반으로 로드할 스타일 파일 결정



1. 서로 다른 테마 색상에 해당하는 4개의 스타일 파일 준비:

 ![](https://images2018.cnblogs.com/blog/1178432/201808/1178432-20180813142303707-1847250400.png)

2. 홈페이지에서 테마 색상 선택을 위한 HTML 제공:

 "
   <span>
               <i></i>
               <i></i>
               <i></i>
               <i></i>
    </span>

   toggleSkin(index){
      setItem('skin',index)  //将最新的主题色名称更新到本地缓存中  
      this.loadingToast('主题色更换中..')
      location.reload()       //主题色更改后刷新页面
  }

"

3 테마 색상을 선택한 후 항목 파일에 따라 테마 색상 스타일이 결정됩니다. 캐시를 기반으로 로드하려면:

   var aa=''
   if(getItem('skin')=='0'){
        aa='app'
   }else if(getItem('skin')=='1'){
       aa='app-skin1'
   }else if(getItem('skin')=='2'){
       aa='app-skin2'
   }else if(getItem('skin')=='3'){
        aa='app-skin3'
   }else{
       aa='app'
   }
  require([`./static/css/${aa}.scss`], function(list){});

여기서 함정에 빠졌습니다. 처음에는 require(

)를 직접 사용했는데 왜 4개의 스타일 파일이 모두 로드되는지 알 수 없었습니다. 시간이 나면 다시 시도해 보겠습니다.

관련 권장 사항:

./static/css/${aa}.scss

jQuery에서 일반적으로 사용되는 메서드(코드 포함)

js 폐쇄? js 클로저 이해하기(코드 포함)

위 내용은 reac은 피부색을 변경하는 기능을 어떻게 구현하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.