How to change the style of elements with a mini program

1. Get the style of the element

Use wx.createSelectorQuery() to get the element

What you need to pay attention to here is : The function to get the element style should be placed in 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. Modify the style of the element

The idea here is to use style to give a variable the style of elements in WXML, and modify the top attribute by modifying the 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 Chinese website, a large number of free small program development tutorials, welcome study!

The above is the detailed content of How to change the style of elements with a mini program. For more information, please follow other related articles on the PHP Chinese website!