> 위챗 애플릿 > 미니 프로그램 개발 > 미니 프로그램으로 요소의 스타일을 변경하는 방법

미니 프로그램으로 요소의 스타일을 변경하는 방법

angryTom
풀어 주다: 2020-03-26 11:24:37
원래의
4465명이 탐색했습니다.

미니 프로그램으로 요소의 스타일을 변경하는 방법

1. 요소의 스타일을 가져옵니다

wx.createSelectorQuery()를 사용하여 요소를 가져옵니다.

여기서 주목해야 할 것은 요소의 스타일을 가져오는 함수가 에 배치되어야 한다는 것입니다. onReady: function(){}

let that = this
const query = wx.createSelectorQuery()
query.select('.detail-card').boundingClientRect()
query.select('.detail-header').boundingClientRect()
query.exec((res => {
    that.setData({
        cardHeight: res[0].height,
        headerHeight: res[1].height
    })
}))
로그인 후 복사

2. 요소 스타일 수정

여기서 아이디어는 WXML의 요소 스타일을 사용하여 변수를 제공하고 topList array

<view 
    class="detail-card" 
    style="top:{{topList[index]+&#39;px&#39;}};z-index:{{index}}" 
    id="{{&#39;card&#39;+index}}" 
    wx:for="{{people}}" 
    wx:key="{{index}}" 
    catchtap="cardClick"
>
</view>
로그인 후 복사

PHP 중국어 웹사이트, 다수의 무료소형 프로그램 개발 튜토리얼, 학습을 환영합니다!

위 내용은 미니 프로그램으로 요소의 스타일을 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿