englishread-front/uni_modules/nx-turn

nx-turn

#使用须知

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

#props属性

属性名称	类型	默认值	可选值	说明
initPage	Number	0	-	初始页码，从0开始
pageCount	Number	-1	-	总页数。-1时无限向下翻页
customClass	String	nx-turn-theme	-	自定义class
customStyle	Object	-	-	自定义style

#event事件

事件名称	参数	说明
init-completed	pageWrapperInfo: 书页节点信息	组件初始化完成事件
turning	----	书页正在翻动事件
turned	info = { pageNumber, isFirst, isLast }，pageNumber: 当前页（从0开始），isFirst: 是否是第一页，isLast: 是否是最后一页	书页翻动完成事件
click-center	----	点击书页中部事件

#slot插槽

插槽名称	参数	说明
page-content	page: 当前页页码（从0开始）	当前页/翻动页插槽，传入自定义页面内容
next-page-content	page: 下一页页码（从1开始）	下一页插槽，传入自定义页面内容，一般和当前页一致

#快速开始

<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;
}