englishread-front/pages/index/test.vue

<template>
  <view class="content">
      <nx-turn
          :initPage="page"
          :pageCount="pageContent.length"
          custom-class="theme-blue"
          @init-completed="initCompleted"
          @turning="handleTurning"
          @turned="handleTurned"
          @click-center="handleClickCenter"
      >
          <template v-slot:page-content="{ page }">
              <view class="page-content">
                  <!-- 对于非富文本页，直接显示文本；对于富文本页，使用 rich-text -->
                  <uv-parse :content="formatContent(pageContent[page])" />
              </view>
          </template>
          <template v-slot:next-page-content="{ page }">
              <view class="page-content">
                  <uv-parse :content="formatContent(pageContent[page])" />
              </view>
          </template>
      </nx-turn>
  </view>
</template>

<script>
export default {
    data() {
        return {
            page: 0,
            pageContent: [
                "使用须知\n1. 这是一个翻页组件，适用于小说翻页功能\n2. 这个插件支持APP-VUE、H5、微信小程序", 
                "我是第二页我是第二页我是第二页我是第二页我是第二页我是第二页",
                "大家好我是第三页大家好我是第三页大家好我是第三页大家好我是第三页",
                [
                    {
                        name: 'h3',
                        attrs: { class: 'rich-title' },
                        children: [{ type: 'text', text: '第四章：星夜下的秘密' }]
                    },
                    {
                        name: 'p',
                        attrs: { class: 'rich-paragraph' },
                        children: [{ type: 'text', text: '夜幕低垂，星光如织，月光洒在林间小路上，映照出一片朦胧的光影。林若曦站在古树下，手中紧握着一封泛黄的信笺。' }]
                    },
                    {
                        name: 'p',
                        attrs: { class: 'rich-paragraph' },
                        children: [
                            {
                                name: 'strong',
                                children: [{ type: 'text', text: '“你相信命运吗？”' }]
                            },
                            { type: 'text', text: ' 她低声呢喃，目光投向远方的星空。信中所述的秘密让她心跳加速，却又充满了未知的恐惧。' }
                        ]
                    },
                    {
                        name: 'p',
                        attrs: { class: 'rich-paragraph rich-indent' },
                        children: [{ type: 'text', text: '风轻轻吹过，树叶沙沙作响，仿佛在诉说一个古老的传说。她深吸一口气，决定踏上这条无人知晓的旅程……' }]
                    },
                    {
                        name: 'img',
                        attrs: { src: '/static/default-image.png' }
                    }
                ],
            ],
        };
    },
    methods: {
        // 格式化内容，确保普通文本和富文本都能正确显示
        formatContent(content) {
            if (typeof content === 'string') {
                return [{ type: 'text', text: content }];
            }
            return content; // 已经是节点数组，直接返回
        },
        initCompleted(pageWrapperInfo) {
            console.log('页面节点信息：', pageWrapperInfo);
        },
        handleTurning() {
            uni.showToast({
                title: '翻页中',
                duration: 100,
                icon: 'none'
            });
        },
        handleTurned(info) {
            console.log('当前页面信息：', info);
            if (info.isFirst) {
                uni.showToast({
                    title: '已经是第一页了',
                    icon: 'none'
                });
            }
            if (info.isLast) {
                uni.showToast({
                    title: '已经是最后一页了',
                    icon: 'none'
                });
            }
        },
        handleClickCenter() {
            uni.showModal({
                title: '提示',
                content: '点击中部',
            });
        }
    }
}
</script>

<style lang="scss" scoped>
page {
    width: 100%;
    height: 100%;
}
.content {
    width: 100%;
    height: 100%;
}
::v-deep .theme-blue {
    background-color: #DCE2F1;
    color: mix(#000000, #DCE2F1, 50%);
    border-color: mix(#FFFFFF, #DCE2F1, 70%);
}
.page-content {
    padding: 15px;
    font-size: 16px;
    line-height: 1.5;
}
::v-deep .rich-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}
::v-deep .rich-paragraph {
    margin-bottom: 10px;
}
::v-deep .rich-indent {
    text-indent: 2em;
}
</style>