• 技术文章 >微信小程序 >小程序开发

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

    angryTomangryTom2020-03-26 11:24:37原创75

    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中文网,转载请注明出处,感谢您的尊重!
    专题推荐:小程序 元素样式 改变
    上一篇:小程序如何获取手机号信息 下一篇:小程序前台怎么判断是空白消息

    相关文章推荐

    • 一个执照能绑几个小程序• 小程序如何使用md5• 一个完整的小程序需要什么功能• 小程序如何获取手机号信息

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网