스타일을 동적으로 수정하기 위한 WeChat 애플릿 JS 구현 코드-미니 프로그램 개발-php.cn

스타일을 동적으로 수정하기 위한 WeChat 애플릿 JS 구현 코드

高洛峰

풀어 주다： 2017-02-18 12:27:35

원래의

3194명이 탐색했습니다.

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"
 })
 }
})

로그인 후 복사

효과

微信小程序 JS动态修改样式的实现代码