小程序scroll-view区域滚动计算可滚动高度

需求：
微信小程序区域滚动，头部是标题、日期切换、下面是表头，可滚动的只有列表表体的内容；通过scroll-view组件实现表体内容的区域滚动。

在这里插入图片描述

思路：

列表页主要有标题、日期时间切换、列表表头在滚动的时候是不能动的，只有表体的数据内容可以区域滚动。表体的内容写在<scroll-view></scroll-view>组件里。
在列表页还可以切换到图表页；图表页的头部和列表共用，相当于筛选条件是一样的。图表需要滚动的也要放到<scroll-view></scroll-view>组件里。

问题：

列表页的区域滚动到最下方数据有遮挡；及图表的区域滚动最下方是有遮挡且图表不能正常上下滚动。
第一次小程序加载进来的时候，列表和图表滚动到最下面不会有遮挡，当从筛选条件页或者从详情页回来的时候，就会出现遮挡，获取的屏幕高度比首次高，导致计算的可滚动区域也变大，最下面的数据显示不全被tabBar遮挡。

解决方案：

将计算滚动高度的方法放在onReady生命周期中调用，然后给data中的变量进行赋值，这样当从详情页或者是筛选页返回的时候，只会执行onShow里的方法，使用的还是首次页面加载时获取的滚动高度。
图表滚动的时候，小程序中的 Echarts是用canvas渲染的，<ec-canvas>默认自带的有手指触摸的事件，就和scroll-view的滑动事件冲突了。
当canvas绑定了滑动事件之后，当手指在这块区域上下滑动的时候，有时候整个滑动事件都被canvas捕获，页面获取不到滑动事件，就会导致整个界面类似卡死状态，这时候只能滑动canvas之外的界面才能触发界面上下滑动。
在这里我将canvas的事件删除，就解决了冲突。由于我们暂时没有触摸的需求（不建议这么做，因为无法触摸图表，导致无法选中图表去显示一些提示的详情信息）

代码：

list.wxml

<view class="tableList">
    <view class="listHead">
      <view>排名</view>
      <view>影片名</view>
      <view wx:for='{{ selectList }}' wx:key="index">{{ item.nameC }}</view>
    </view>
    <!--scrollListHeight 可滚动高度-->
    <scroll-view class="listBody" scroll-y="true" bindscrolltolower="scrollToLower" lower-threshold='30' style='height: {{ scrollListHeight + "px" }}' upper-threshold="50" scroll-top="0">
      <view class="li" wx:for="{{list}}" wx:key="sort" wx:for-index="i" data-videoId="{{item.videoId}}" data-vType="{{item.vType}}" data-platformIds="{{item.platformId}}" data-periodCount="{{item.periodCount}}" bindtap="goDetail">
        <view>
          <view class="name">
            {{ item.name }}
          </view>
          <view class="file">上映{{item.issueDay ? item.issueDay : '--'}}天
          </view>
        </view>
        <view wx:for="{{selectList}}" wx:key="index" wx:for-index="index"  wx:for-item="item2" class="activeLi">
          {{ showList[i]['async' + index] ? showList[i]['async' + index] : '--' }}
        </view>
      </view>
    </scroll-view>
  </view>

list.js

// 首先获取到不需要滚动区域的高度，通过屏幕高度-不滚动的高度和==可滚动高度
computeScrollViewHeight() {
    let query = wx.createSelectorQuery().in(this)
    query.select('.titleBox').boundingClientRect()
    query.select('.datetime').boundingClientRect()
    query.select('.interval').boundingClientRect()
    query.select('.boxOfficeList').boundingClientRect()
    query.select('.listHead').boundingClientRect()
    query.exec((res) => {
      let titleBoxHeight = res[0].height;
      let datetimeHeight = res[1].height;
      let intervalHeight = res[2].height;
      let boxOfficeListHeight = res[3].height;
      let listHeadHeight = res[4].height;
      let screenHeight = wx.getSystemInfoSync().windowHeight
        let scrollHeight = screenHeight - titleBoxHeight - datetimeHeight - intervalHeight - boxOfficeListHeight - listHeadHeight
        this.setData({
          scrollListHeight: scrollHeight
        })
    })
  },
  
onReady: function () {
    this.computeScrollViewHeight()
  },

图表写法一样，将要展示的图表放在scrollview组件中，计算滚动高度方法一样，只需要将ec-canvas.wxml中的bindtouch方法删掉即可避免滑动冲突。
在这里插入图片描述

参考文章：
微信小程序计算scroll-view的高度
 精确计算微信小程序scrollview高度，全机型适配
 canvas的触摸时间和页面的滑动事件有冲突
 小程序windowHeight在不同页面高度不一致问题及解决方案

小程序scroll-view区域滚动计算可滚动高度

悦读