其实这样在开发小程序的时候 还是比较常见的,就是我们页面底部有一个需要滚动加载滚动的 展示容器

这个时候选择scroll-view 就是很合理了 但是 我们这个时候 需要让scroll-view 填满剩下的空间, 那样就需要计算了
公式: 设备的高度 - scroll-view 距离顶部的距离 = scroll-view的高度

获取设备的高度

Taro.getSystemInfo({
  success: (res) => {
    state.clientHeight = res.screenHeight;
  },
});
1
2
3
4
5

计算scroll-view距离顶部的距离

import Taro, { useReady } from "@tarojs/taro";
useReady(() => {
      Taro.nextTick(() => {
        const query = wx.createSelectorQuery();
        query.select("#scrollview").boundingClientRect();
        query.exec((res) => {
          state.scrollHeight = state.clientHeight - res[0].top + "px";
        });
      });
    });
1
2
3
4
5
6
7
8
9
10

然后就是设置高度
:style=“{ height: scrollHeight }”

<scroll-view
            :scroll-y="true"
            @scrolltoupper="upper"
            @scrolltolower="lower"
            @scroll="scroll"
            :scroll-into-view="toView"
            :scroll-top="scrollTop"
            :style="{ height: scrollHeight }"
            v-if="list.length > 0"
            class="scroll-view"
            enhanced
            :bounces="false"
            id="demo"
          >
 </scroll-view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

但是设置完成后 会发现 页面有回跳的情况存在 我们页面还是能出现 超过页面高度的滚动 这个就很烦人了

这个时候其实还能解决。就是页面的滚动给禁止了
disableScroll:true

export default {
  navigationBarTitleText: "Art Meta",
  enablePullDownRefresh: true,
  disableScroll:true
};

1
2
3
4
5
6

但还是有问题, 部门机型 就是滚动不到scroll-view的底部 导致底部的元素是看不全的 就很难受
因为scroll-view 也存在回调的情况 没办法 太难受
这个时候 还能处理就是给scroll-view 加上 padding-bottom 来进行处理

关注我 持续更新前端知识。