uni-app 加载长html文本 scroll-view 改上下滑动为左右翻页

在uni-app中，如果你想要使用scroll-view组件来加载长的HTML文本，并且实现左右滑动来进行翻页，你可以通过监听滚动事件来动态加载更多内容。以下是一个简单的示例：

<template>
  <scroll-view class="scroll-view" scroll-x="true" @scroll="onScroll">
    <view class="content" v-html="htmlText"></view>
  </scroll-view>
</template>
 
<script>
export default {
  data() {
    return {
      htmlText: '<div>这里是你的长HTML文本...</div>',
      page: 1,
      // 假设每页加载1000字
      pageSize: 1000,
      // 假设总共有10000字的文本
      totalTextLength: 10000
    };
  },
  methods: {
    onScroll(event) {
      const scrollLeft = event.detail.scrollLeft;
      const scrollWidth = event.detail.scrollWidth;
      const contentWidth = event.detail.contentWidth;
      // 当滚动到底部时加载更多内容
      if (scrollLeft + scrollWidth >= contentWidth - 10 && this.htmlText.length < this.totalTextLength) {
        // 模拟加载更多内容
        const startIndex = this.htmlText.length;
        const endIndex = startIndex + this.pageSize;
        const newContent = this.getMockText(startIndex, endIndex);
        this.htmlText += newContent;
        this.page++;
      }
    },
    getMockText(start, end) {
      // 这里模拟获取文本，实际应用中应该从服务器获取
      let text = '这里是更多的HTML文本...';
      return text.substring(start, end);
    }
  }
};
</script>
 
<style>
.scroll-view {
  white-space: nowrap;
  width: 100%;
}
.content {
  display: inline-block;
  width: 100%;
}
</style>

在这个示例中，scroll-view组件被设置为水平滚动，当内容滚动到右侧边缘时，通过监听scroll事件来判断是否到达了滚动视图的底部。如果没到达底部且当前内容长度小于总文本长度，则模拟加载更多文本。

请注意，这个示例使用了一个模拟函数getMockText来获取新的文本内容，实际应用中你需要替换为实际获取文本内容的逻辑。另外，文本长度的计算和判断底部的逻辑也需要根据实际文本内容进行调整。