首页 >微信小程序 >小程序开发 > 正文

小程序如何改变元素的样式

原创2020-03-26 11:24:370647
第11期线上培训班

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中元素的样式利用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>

PHP中文网,大量免费小程序开发教程,欢迎学习!

以上就是小程序如何改变元素的样式的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码
  • 相关标签:小程序 元素样式 改变
  • 本文原创发布php中文网,转载请注明出处,感谢您的尊重!
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    推荐视频教程
  • javascript初级视频教程javascript初级视频教程
  • jquery 基础视频教程jquery 基础视频教程
  • 视频教程分类