遇到的是2个大问题:

1、出现无法滚动

2、滚动到底部遮住了一部分，导致展示不全。

运用

better-scroll是一款重点解决移动端或者pc端各种滚动场景需求的插件。基于iscroll的重写的。用来做滚动列表。（轮播图、picker）那些。

安装

npm install @better-scroll/core

这个库的核心代码，抽象了核心滚动部分，作为better-scroll的最小使用单元，体积小。很多时候我们就只是需要一个纯粹的滚动需求，所以只需要引入这个库。

使用就只是

import BScroll from '@better-scroll/core'

const a = new BScroll('元素', {
    // ... 一些配置
})

列表渲染

整体效果是这个首页滚动（包括轮播图、和歌单列表。

第一个问题

第一个小问题就是，无论如何都无法滚动。代码如下：

打开控制台，看到滚动只在轮播图那一块生效，而我们是要整一块滚动。

这里呢，有个问题，就是我们这里scrollContainerRef这个父元素下面有2个或者多个元素的话，默认是指定处理第一个子元素。所以这里我们应该改成用一个div把这2个元素包起来。像这样：

第二个问题

第二个问题也是比较值得关注的。

这个scrollContainer的wrapper的高度一定是小于里面内容content的高度的。要么就无法滚动。

所以，需要给父元素scrollContainer加上样式加持，代码如下所示：

任何时候，如果出现无法滚动的情况下，都应该问问自己，查一查，是否内容的高度是否大于wrapper的高度了。只有这样，才能够滚动起来。

第三个问题

由于我这里的歌单列表是拿的接口数据，在接口还没回来的时候，他是没办法计算高度的。所以也会导致这个better-scroll无法滚动。可以添加一个watch事件来刷新一下better-scroll。因为一开始dom元素渲染时图片还未下载，所以导致内容元素的高度小于预期，出现滚动不正常的情况。

此时应该在图片加载完成后去调用refresh方法，它会重新计算最新的滚动距离。

watch(recommendList, () => {
  nextTick(() => {
    bScroll.value && bScroll.value.refresh()
  })
}, {
  deep: true
})

底部滚动弹回不到底

问题如图所示：

这个直接在滚动的元素的下面的第一个父元素加上padding-bottom就可以了。

.total {
   padding-bottom: 90px;
}

以上就是在vue3中运用better-scroll做移动端滚动列表时遇到的无法滚动和底部被遮挡的问题解决方法。