本文主要是介绍小程序 计算scroll-view的自适应高度，防止整个页面进行了滑动，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
学习小程序已经快两周了，总结一下scroll-view使用遇到的问题
先上效果图吧
如图，我需要计算出scroll-view的高度，设置。否则scroll-view滑动的时候会带着页面滑动，并非实际业务需求。
1.设置scroll-view高度为动态的。
<scroll-view class='scroll-view-left' scroll-y='true'style='height:{{scrollHeight}}px'><block wx:for='{{2}}' wx:key='*this'><view class='flex-cloumn'>水晶梨</view></block></scroll-view>
2.计算实际高度=
窗口高度（wx.getSystemInfoSync().windowHeight）- 不滑动界面的高度
/*** 计算scrollview高度*/calculateScrollViewHeight() {let that = this;console.log(systemInfo)let query = wx.createSelectorQuery().in(this)//根据节点id查询节点部分的高度（px单位）query.select('#image').boundingClientRect();query.select('#groupInfo').boundingClientRect();query.select('#divider').boundingClientRect();query.select('#bottom').boundingClientRect();query.exec((res) => {// 分别取出节点的高度let imageHeight = res[0].height;let groupInfoHeight = res[1].height;let dividerHeight = res[2].height;let bottomHeight = res[3].height;// 然后窗口高度（wx.getSystemInfoSync().windowHeight）减去其他不滑动界面的高度let scrollViewHeight = wx.getSystemInfoSync().windowHeight -imageHeight - groupInfoHeight - dividerHeight - bottomHeight;console.log(scrollViewHeight)// 算出来之后存到data对象里面that.setData({scrollHeight: scrollViewHeight});})}
3.在onReady()中执行计算方法 设置scrll-view高度
/*** 生命周期函数--监听页面初次渲染完成*/onReady: function() {let that = this;setTimeout(function() {that.calculateScrollViewHeight()}, 100)//calculateScrollViewHeight();},
注：这里存在一个问题，我直接执行获取的高度与实际的不一致，我延迟100ms才能得到正确的高度，如果有大佬知道，麻烦告诉我一哈。
这篇关于小程序 计算scroll-view的自适应高度，防止整个页面进行了滑动的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
