uni-app nvue下的web-view组件缺少监听触发方法 如加载中、加载完成、下拉刷新上拉加载等

在 uni-app 的 nvue 页面中使用 web-view 组件时，确实存在一些限制，特别是在监听事件方面。web-view 组件本身并不直接提供像 加载中、加载完成、下拉刷新、上拉加载 等事件的监听方法。不过，你可以通过一些间接的方式来实现类似的功能。

1. 加载中和加载完成的监听

web-view 组件本身没有提供加载状态的事件，但你可以通过 JavaScript 与原生页面的交互来间接实现。

1.1 使用 postMessage 和 onMessage 进行通信

你可以在 web-view 中加载的网页中，通过 postMessage 方法向原生页面发送消息，原生页面通过 onMessage 接收消息，从而实现加载状态的监听。

网页端 (HTML/JavaScript):

window.onload = function() {
  // 网页加载完成后发送消息
  window.parent.postMessage({ type: 'loadComplete' }, '*');
};

原生页面 (nvue):

<template>
  <web-view :src="url" @message="handleMessage"></web-view>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://example.com'
    };
  },
  methods: {
    handleMessage(event) {
      const message = event.detail.data;
      if (message.type === 'loadComplete') {
        console.log('网页加载完成');
      }
    }
  }
};
</script>

1.2 使用 uni.onWindowResize 监听页面变化

你可以通过监听页面的尺寸变化来判断页面是否加载完成。

uni.onWindowResize((res) => {
  console.log('页面尺寸变化:', res);
  // 在这里可以判断页面是否加载完成
});

2. 下拉刷新和上拉加载

web-view 组件本身不支持下拉刷新和上拉加载，但你可以通过 nvue 页面的 scroll-view 组件结合 web-view 来实现类似的功能。

2.1 使用 scroll-view 包裹 web-view

你可以在 scroll-view 中嵌入 web-view，并通过 scroll-view 的下拉刷新和上拉加载事件来实现。

<template>
  <scroll-view
    :scroll-y="true"
    @refresherrefresh="onRefresh"
    @scrolltolower="onLoadMore"
  >
    <web-view :src="url"></web-view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://example.com'
    };
  },
  methods: {
    onRefresh() {
      console.log('下拉刷新');
      // 在这里可以刷新网页
    },
    onLoadMore() {
      console.log('上拉加载');
      // 在这里可以加载更多内容
    }
  }
};
</script>