更新记录

1.0.3（2024-08-15） 下载此版本

• 修复在vue2中不支持的语法

1.0.2（2024-08-09） 下载此版本

• 修改在vue2中不支持的语法

1.0.1（2024-07-19） 下载此版本

• 去除部分无用代码

平台兼容性

nx-turn

使用须知

• 1、这是一个翻页组件，适用于小说翻页功能
• 2、这个插件支持APP-VUE、H5、微信小程序

props属性

event事件

slot插槽

快速开始

<view class="content">
    <nx-turn>
        <template v-slot:page-content="{ page }">
            <text>{{ page }}</text>
        </template>
        <template v-slot:next-page-content="{ page }">
            <text>{{ page }}</text>
        </template>
    </nx-turn>
</view>

page {
    width: 100%;
    height: 100%;
}
.content {
    width: 100%;
    height: 100%;
}

完整示例

<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">
                <text>{{ pageContent[page] }}</text>
            </view>
        </template>
        <template v-slot:next-page-content="{ page }">
            <view class="page-content">
                <text>{{ pageContent[page] }}</text>
            </view>
        </template>
    </nx-turn>
</view>

export default {
    data() {
        return {
            // 当前页码
            page: 0,
            // 分页数据
            pageContent: [
                "使用须知\n1. 这是一个翻页组件，适用于小说翻页功能\n2. 这个插件支持APP-VUE、H5、微信小程序", 
                "1.0.0（2024-07-10）\n第一次发布\n仿真翻页，支持翻起书角"
            ],
        };
    },
    methods: {
        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: '点击中部',
            });
        }
    }
}

page {
    width: 100%;
    height: 100%;
}
.content {
    width: 100%;
    height: 100%;
}
/* #ifdef VUE3 */
::v-deep
/* #endif */
/* #ifdef VUE2 */
/deep/
/* #endif */
.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;
}