ミニプログラムで要素のスタイルを変更する方法

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 に配置する必要があることです。要素のスタイルを変更します。

ここでのアイデアは、style を使用して変数に WXML の要素のスタイルを与え、topList 配列を変更して top 属性を変更することです

<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 中国語 Web サイト、多数の無料の 小規模プログラム開発チュートリアル 、学習へようこそ!

以上がミニプログラムで要素のスタイルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。