englishread-front/uni_modules/nx-turn/readme.md

# 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开始） | 下一页插槽，传入自定义页面内容，一般和当前页一致 |

#快速开始
```html
<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>
```
```css
page {
	width: 100%;
	height: 100%;
}
.content {
	width: 100%;
	height: 100%;
}
```

#完整示例
```html
<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>
```
```javascript
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: '点击中部',
			});
		}
	}
}
```
```css
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;
}
```