小程序页面scroll-view在父级view上自身滑动问题

小程序中的scroll-view组件是一个可滚动视图区域，当scroll-view组件在一个较小的容器中使用时，可能会出现无法滑动的情况。这是因为scroll-view默认的滑动方向为vertical（垂直方向），当scroll-view组件的高度大于或等于父级容器的高度时，就会自动出现滚动条并可以正常滑动。但当scroll-view组件的高度小于父级容器的高度时，就会出现无法滑动的情况。

解决这个问题的方法是在scroll-view的样式中设置height属性为100%，这样scroll-view的高度将会和父级容器的高度一致，从而可以正常滑动。

相关问题

微信小程序scroll-view滑动穿透问题，怎么解决

微信小程序中，scroll-view 组件默认会阻止页面上其他元素的滑动事件，这可以通过设置 `catchtouchmove` 属性来解决。

具体做法如下：

1. 在 scroll-view 组件上添加 `catchtouchmove="true"` 属性，如下所示：

<scroll-view catchtouchmove="true">
  <!-- scroll-view 内容 -->
</scroll-view>

2. 在页面的 `onLoad` 或 `onReady` 生命周期中，获取 scroll-view 组件的高度和宽度，然后在页面上添加一个与 scroll-view 同样大小的透明的 view，并将其 zIndex 设置为比 scroll-view 更高的数值，这样就可以让页面上的其他元素在透明的 view 上进行滑动了。代码如下：

onLoad: function () {
  var that = this;
  wx.createSelectorQuery().select('#scrollview').boundingClientRect(function (rect) {
    that.setData({
      scrollHeight: rect.height
    });
  }).exec();

  wx.getSystemInfo({
    success: function (res) {
      that.setData({
        windowHeight: res.windowHeight
      });
    }
  });
},

<!-- 添加一个与 scroll-view 大小相同的透明 view -->
<view class="transparent-view" style="height: {{windowHeight - scrollHeight}}px; z-index: 1;"></view>

<scroll-view id="scrollview" catchtouchmove="true">
  <!-- scroll-view 内容 -->
</scroll-view>

3. 在页面的 CSS 中，让透明的 view 不显示出来，代码如下：

.transparent-view {
  background-color: transparent;
}

通过以上步骤，就可以解决微信小程序中 scroll-view 组件滑动穿透的问题了。

小程序监听scroll-view滑动到底部

在小程序中，我们可以通过监听 `scroll-view` 组件的 `scrolltolower` 事件来判断页面是否滑动到底部。具体步骤如下：

1. 首先，在 `scroll-view` 组件上绑定 `scrolltolower` 事件，例如：`<scroll-view bind:scrolltolower="onScrollToLower">`。

2. 在页面的 `Page` 中定义 `onScrollToLower` 方法。

3. 在 `onScrollToLower` 方法中，通过获取 `scroll-view` 组件的滚动位置和宽度等信息，判断是否已经滑动到底部。

具体代码如下所示：

// 在Page的定义中
Page({
  onScrollToLower(e) {
    // 获取scroll-view的相关信息
    const scrollView = e.detail.scrollView;
    const { scrollHeight, scrollTop, clientHeight } = scrollView;

    // 判断是否滑动到底部
    if (scrollTop + clientHeight >= scrollHeight) {
      console.log("已滑动到底部");
      // 在此处可以执行滑动到底部后的相关操作
    }
  }
});

上述代码中，我们首先通过 `e.detail.scrollView` 获取到 `scroll-view` 组件的各项信息，包括滚动高度 `scrollHeight`、滚动距离 `scrollTop` 和可视区域高度 `clientHeight`。

然后，我们判断当前的滚动距离和可视区域高度之和是否大于或等于滚动高度，如果是，则说明已经滑动到底部。

最后，在判断滑动到底部后，你可以执行相应的操作，如加载更多内容或展示相关提示信息等。

这样，当用户滑动到底部时，你就能够通过 `scrolltolower` 事件监听到，并进行相应的处理。