WeChat 개발 JS 동적 수정 스타일

이 기사에서는 WeChat 애플릿 JS의 스타일을 동적으로 수정하는 구현 코드를 주로 소개합니다. 데이터를 바인딩한 다음 동적으로 수정하여 필요한 친구가 이를 참조할 수 있도록 하는 것입니다.

WeChat 미니 프로그램의 함정은 js가 스타일을 동적으로 수정할 수 있다는 것입니다. js나 jq를 사용하여 한 줄의 코드로 이를 쉽게 수행할 수 없습니다. 또는 스타일을 수정하려면 RemoveClass addClass를 사용하세요.

다음은 스타일을 동적으로 수정하는 방법으로, 데이터를 바인딩한 후 동적으로 수정하여 스타일을 동적으로 변경하는 것이 원칙입니다. 좀... 그런 느낌이 들어요, 이상해요. 하지만 우리가 할 수 있는 일은 아무것도 없었습니다. 더 좋은 방법이 있다면 댓글 영역에서 공유해 주세요.

test.wxml

<view style="text-align: center;">
 <label style="color:{{color}};">我会变色</label>
 <button bindtap="clickRed">变红</button>
 <button bindtap="clickgreen">变绿</button>
</view>

test.js

Page({
 data: {
 color: "red"
 },
 clickRed: function () {
 this.setData({
  color: "red"
 })
 },
 clickgreen: function () {
 this.setData({
  color: "green"
 })
 }
})

효과

[관련 추천]

1. WeChat 개발에서 글로벌 JS를 호출하는 방법은 무엇입니까?

2. WeChat 개발 시 다른 js 파일 참조 예시에 대한 자세한 설명

3. WeChat 개발 시 라이프사이클 기능 예시 튜토리얼

위 내용은 WeChat 개발 JS 동적 수정 스타일의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!