微信小程序 fixed，没标明高度 js获取高度不准确解决方案-icode9专业技术文章分享

本文主要是介绍微信小程序 fixed，没标明高度 js获取高度不准确解决方案-icode9专业技术文章分享，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

在微信小程序中，当你使用 position: fixed; 定位元素且未标明高度时，获取该元素的高度可能会不准确。因为固定定位的元素在文档流中是浮动的，其高度在页面渲染时可能未被正确计算。以下是一些解决方案，帮助你精确获取固定定位元素的高度。

解决方案 1：使用 `setTimeout`

有时候，页面中的布局尚未完全渲染，导致获取的高度不准确。通过使用 setTimeout 来延迟获取高度，可以解决此问题。

setTimeout(() => {
    const query = wx.createSelectorQuery();
    query.select('.fixed-element').boundingClientRect((rect) => {
        console.log('高度:', rect.height); // 获取高度
    }).exec();
}, 100); // 100 毫秒延迟

JavaScript

解决方案 2：在 `onShow` 或 `onReady` 中调用

确保在页面完全渲染后再获取高度，可以在 onShow 或 onReady 中进行。

onReady() {
    const query = wx.createSelectorQuery();
    query.select('.fixed-element').boundingClientRect((rect) => {
        console.log('高度:', rect.height);
    }).exec();
}

JavaScript

解决方案 3：使用 `getComputedStyle`

在没有显式设置高度的情况下，可以通过 getComputedStyle 获取计算后的样式，特别是在某些情况下可能更为准确。

const fixedElement = this.selectComponent('.fixed-element');
const height = fixedElement ? fixedElement.height : 0;
console.log('高度:', height);

JavaScript

解决方案 4：动态更新高度

如果你知道高度会发生改变，可以使用 resize 事件来动态更新高度。

function updateHeight() {
    const query = wx.createSelectorQuery();
    query.select('.fixed-element').boundingClientRect((rect) => {
        this.setData({
            fixedElementHeight: rect.height, // 将高度保存到数据集中
        });
    }).exec();
}

onLoad() {
    wx.onWindowResize(updateHeight);
},
onUnload() {
    wx.offWindowResize(updateHeight);
}

JavaScript

说明

选择合适的方案，根据您的具体需求和页面布局特性。
请确保 .fixed-element 为您希望获取高度的元素的类名，且在实际的代码中对应到正确的元素。

通过以上方法，您应该能够更准确地获取 fixed 定位元素的高度。

标签： 来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

这篇关于微信小程序 fixed，没标明高度 js获取高度不准确解决方案-icode9专业技术文章分享的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Javascript