我是自定义了导航条,想要实现导航条固定在顶部、页面内容滑动也不影响导航条。因此我需要设置页面与顶部的距离,这个距离是导航条的距离。通过wx.createSelectorQuery() 可以获取到导航条的高度,但是好像应为这个API内的异步原因,我在导航条组件的生命周期attached()中获取到了导航条高度,但是在页面的onload方法中取不到这个高度。进入页面首先运行了组件的attached()方法,然后运行了页面的onload()方法,但是attached()中的wx.createSelectorQuery()获得的高度还在onload()之后才取得结果。请问这个该怎么解决?我想要一进入界面就获得自定义导航条组件的高度,然后赋值给全局变量,再让页面得到渲染出来
自定义导航条.wxml
<view class="bar" id="bar">
</view>
自定义导航条.js
attached:function(){
console.log("attached")
const query = this.createSelectorQuery()
query.select('#bar').boundingClientRect()
query.exec(function(res){
console.log(res,'自定义导航条信息')
app.globalData.barHeight = res.height
})
},
页面.wxml(<bar />是自定义导航条组件)
<bar>
</bar>
<view>
</view>
页面.js
onLoad: function (options) {
console.log(app.globalData.barHeight,'页面初次加载')
}
在这里获得的app.globalData.barHeight为一开始我在app.js中定义的初始值0,没有被组件中的值改变。
现在好像有两种解决方法:第一个是解决createSelectorQuery的异步问题,
第二个是解决 page.js中用height取了全局变量的值,但是当后面全局变量在 组件.js中被改变的时候,页面的height没有自己改变的问题
可以考虑使用 promise 进行封装,然后再通过 async / await 获取参数,不知道能不能解决楼主问题
害,同样有这样的需求,真的被这个异步搞烦了
因为全局变量的值在组件js中被改变了,其实界面js中也改变了,但是不会重新渲染,只有用setData改变值才会重新渲染,所以在页面wxml中传了一个事件给自定义组件,在组件js中得到了高度后触发页面传过来的事件,在页面js的方法中得到自定义组件传过来的高度并setData给变量,就能重新渲染界面了。
虽然解决了这个问题,但感觉还有更好的方法。我的自定义组件用到了很多界面,这样一来所有界面都需要写一个事件,如果能解决createSelectorQuery中exec函数的异步或者在哪个生命周期能获得数据就更好了。
写在这里试试