微信小程序如何获取组件实际高度

viewscroll-view scroll-x scroll-with-animation scroll-left="{{menuIndex}}" style="height: 100px; width:100%;"view id='#haha' class='all' style='width:{{menuWidth}}px;'block wx:key="lists" wx:for="{{li ...

1. <view>
2. <scroll-view scroll-x scroll-with-animation scroll-left="{{menuIndex}}" style="height: 100px; width:100%;">
3. <view id='#haha' class='all' style='width:{{menuWidth}}px;'>
4. <block wx:key="lists" wx:for="{{lists}}">
5. <view id="a{{index}}" bindtap='jumpIndex' class='menu' data-menuindex='{{index}}'>{{item.list}}</view>
6. </block>
7. </view>
8. </scroll-view>
9. </view>

1. data: {
2. // 初始化滑动条数据
3. menuIndex:0,
4. // 每个菜单的宽度
5. onlyWidth: 70,
6. // 右侧的margin
7. marginWidth:10,
8. // 菜单总长
9. menuWidth:0,

1. lists:[
2. { list: 'a1' },
3. { list: 'a2' },
4. { list: 'a3' },
5. { list: 'a4' },
6. { list: 'a5' },
7. { list: 'a6' },
8. { list: 'a7' }
9. ],
10. },
11. jumpIndex:function(e){
12. var menuIndex = (e.currentTarget.dataset.menuindex-1)*80;
13. this.setData(
14. {menuIndex:menuIndex}
15. )
16. },

1. /**
2. * 生命周期函数--监听页面加载
3. */
4. onLoad: function (options) {
5. let that=this;
6. let lists = this.data.lists;
7. let onlyWidth=this.data.onlyWidth;
8. let marginWidth=this.data.marginWidth;
9. let menuWidth = lists.length * (onlyWidth + marginWidth) - marginWidth;
10. that.setData({
11. menuWidth: menuWidth
12. })
13. // 获取用户高度
14. let query = wx.createSelectorQuery();
15. query.select('#a0').boundingClientRect()
16. query.exec(function (res) {
17. console.log(res);
18. })
19. },