微信小程序获取修改元素的样式

1.获取元素的样式

使用wx.createSelectorQuery()来获取元素
这里需要注意的是
1.获取元素样式的函数应该放在onReady:function(){}这个里面
2.获取元素的代码异步执行,想同步执行需要把后面的代码放在setTimeout

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
    })
}))	
setTimeout(()=>{
// 同步执行的代码
,600})

2.修改元素的样式

这里思路是html中元素的样式利用style给一个变量,通过修改topList这个数组来修改top属性

<view class="detail-card" style="top:{{topList[index]+'px'}};z-index:{{index}}" id="{{'card'+index}}" wx:for="{{people}}" wx:key="{{index}}" catchtap="cardClick">
</view>
发布了25 篇原创文章 · 获赞 1 · 访问量 1644

猜你喜欢

转载自blog.csdn.net/weixin_43977647/article/details/104239564