app_ancientSayings/uni_modules/yingbing-flip

#使用须知

• 1、这是一个翻页组件，适用于小说翻页或答题功能
• 2、这个插件支持APP-NVUE、APP-VUE、H5、微信小程序
• 3、该组件滑动项同时只能存在当前项、前面项、后面项3个，其余项会被销毁
• 4、如果想要构建阅读器需要配合好用阅读分页插件使用
• 5、有什么不懂，可以加群 1087735942 聊

#props属性

属性名	类型	默认值	可选值	说明
data	Array	----	----	列表数据
current	Number	0	----	初始化位置
vertical	Boolean	false	true/false	垂直滑动
duration	Number	100	----	滑动动画时间
bgColor	String	----	----	背景色
pulldownable	Boolean	false	true/false	开启下拉刷新
pullupable	Boolean	false	true/false	开启上拉加载
pulldownHeight	Number	80	----	下拉刷新控件高度（px）
pullupHeight	Number	80	----	上拉加载控件高度（px）
sliderFault	Number	20	----	滑动容错距离（px）
type	String	real	real（仿真）/cover（覆盖）/none（无动画）	翻页方式
unableClickPage	Boolean	false	true/false	关闭点击左右2侧翻页功能（type为none时忽略此属性）

#event事件

事件名	参数	说明
change	current: 当前滑动位置, detail: 当前滑动位置列表数据	位置改变事件
pulldown	callback: 回调	下拉刷新事件
pullup	callback: 回调	上拉加载事件

#内置方法

方法名	参数	说明
refresh	----	刷新滑动位置（替换数据时使用）
flipToNext	----	翻到到下个位置
flipToPrev	----	翻到上个位置

#slot插槽

名称	说明
pulldownDefault	下拉加载默认提示
pulldownReady	下拉加载准备提示
pulldownLoading	下拉加载等待提示
pulldownSuccess	下拉加载成功提示
pulldownFail	下拉加载失败提示
pullupDefault	上拉加载默认提示
pullupReady	上拉加载准备提示
pullupLoading	上拉加载等待提示
pullupSuccess	上拉加载成功提示
pullupFail	上拉加载失败提示

#快速开始

	<yingbing-flip :data="list" style="height: 100vh;">
		<!-- #ifndef MP -->
		<template v-slot="{item, index}">
		<!-- #endif -->
		<!-- #ifdef MP -->
		<template v-for="(item, index) in list" :slot="index">
		<!-- #endif -->
			<view style="height: 100%">
				<text style="font-size: 50px;font-weight: bold;color: #fff;">{{item}}</text>
			</view>
		</template>
	</yingbing-flip>

	export default {
		data () {
			return {
				list: []
			}
		},
		onReady () {
			for ( let i = 0; i < 10; i++ ) {
				this.list.push(i)
			}
		}
	}

#垂直滑动

	<yingbing-flip vertical :data="list" style="height: 100vh;">
		<!-- #ifndef MP -->
		<template v-slot="{item, index}">
		<!-- #endif -->
		<!-- #ifdef MP -->
		<template v-for="(item, index) in list" :slot="index">
		<!-- #endif -->
			<view style="height: 100%">
				<text style="font-size: 50px;font-weight: bold;color: #fff;">{{item}}</text>
			</view>
		</template>
	</yingbing-flip>

	export default {
		data () {
			return {
				list: []
			}
		},
		onReady () {
			for ( let i = 0; i < 10; i++ ) {
				this.list.push(i)
			}
		}
	}

#下拉刷新

	<yingbing-flip :data="list" vertical pulldownable @pulldown="handlePulldown" style="height: 100vh;">
		<!-- #ifndef MP -->
		<template v-slot="{item, index}">
		<!-- #endif -->
		<!-- #ifdef MP -->
		<template v-for="(item, index) in list" :slot="index">
		<!-- #endif -->
			<view style="height: 100%">
				<text style="font-size: 50px;font-weight: bold;color: #fff;">{{item}}</text>
			</view>
		</template>
		<template #pulldownDefault>
			<view class="pulldown">
				<text>下拉刷新</text>
			</view>
		</template>
		<template #pulldownReady>
			<view class="pulldown">
				<text>松开刷新</text>
			</view>
		</template>
		<template #pulldownLoading>
			<view class="pulldown">
				<text>正在刷新</text>
			</view>
		</template>
		<template #pulldownSuccess>
			<view class="pulldown">
				<text>刷新成功</text>
			</view>
		</template>
		<template #pulldownFail>
			<view class="pulldown">
				<text>刷新失败</text>
			</view>
		</template>
	</yingbing-flip>

	export default {
		data () {
			return {
				list: []
			}
		},
		onReady () {
			for ( let i = 0; i < 10; i++ ) {
				this.list.push(i)
			}
		},
		methods: {
			handlePulldown (callback) {
				//模拟请求
				setTimeout(() => {
					let arr = []
					for ( let i = 0; i < 10; i++ ) {
						arr.push(i)
					}
					this.list = arr
					callback('success') //成功回调
					// callback('fail') //失败回调
				}, 500)
			}
		}
	}

	.pulldown {
		display: flex;
		align-items: center;
		justify-content: center;
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
	}

#上拉加载

	<yingbing-flip :data="list" vertical pullupable @pullup="handlePullup" style="height: 100vh;">
		<!-- #ifndef MP -->
		<template v-slot="{item, index}">
		<!-- #endif -->
		<!-- #ifdef MP -->
		<template v-for="(item, index) in list" :slot="index">
		<!-- #endif -->
			<view style="height: 100%">
				<text style="font-size: 50px;font-weight: bold;color: #fff;">{{item}}</text>
			</view>
		</template>
		<template #pullupDefault>
			<view class="pulldown">
				<text>上拉加载</text>
			</view>
		</template>
		<template #pullupReady>
			<view class="pulldown">
				<text>松开刷新</text>
			</view>
		</template>
		<template #pullupLoading>
			<view class="pulldown">
				<text>正在刷新</text>
			</view>
		</template>
		<template #pullupSuccess>
			<view class="pulldown">
				<text>刷新成功</text>
			</view>
		</template>
		<template #pullupFail>
			<view class="pulldown">
				<text>刷新失败</text>
			</view>
		</template>
	</yingbing-flip>

	export default {
		data () {
			return {
				list: []
			}
		},
		onReady () {
			for ( let i = 0; i < 10; i++ ) {
				this.list.push(i)
			}
		},
		methods: {
			handlePullup (callback) {
				//模拟请求
				setTimeout(() => {
					for ( let i = 0; i < 10; i++ ) {
						this.list.push(i)
					}
					callback('success') //成功回调
					// callback('fail') //失败回调
				}, 500)
			}
		}
	}

	.pulldown {
		display: flex;
		align-items: center;
		justify-content: center;
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
	}

#JS控制滑动

	<yingbing-flip ref="flip" :data="list" style="height: 100vh;">
		<!-- #ifndef MP -->
		<template v-slot="{item, index}">
		<!-- #endif -->
		<!-- #ifdef MP -->
		<template v-for="(item, index) in list" :slot="index">
		<!-- #endif -->
			<view style="height: 100%">
				<text style="font-size: 50px;font-weight: bold;color: #fff;">{{item}}</text>
			</view>
		</template>
	</yingbing-flip>
	<button @tap="flipToPrev">向前滑动</button>
	<button @tap="flipToNext">向后滑动</button>

	export default {
		data () {
			return {
				list: [1,2,3,5,6]
			}
		},
		methods: {
			flipToNext () {
				this.$refs.flip.flipToNext()
			},
			flipToPrev () {
				this.$refs.flip.flipToPrev()
			}
		}
	}

#刷新组件

	<yingbing-flip ref="flip" :data="list" style="height: 100vh;">
		<!-- #ifndef MP -->
		<template v-slot="{item, index}">
		<!-- #endif -->
		<!-- #ifdef MP -->
		<template v-for="(item, index) in list" :slot="index">
		<!-- #endif -->
			<view style="height: 100%">
				<text style="font-size: 50px;font-weight: bold;color: #fff;">{{item}}</text>
			</view>
		</template>
	</yingbing-flip>
	<button @tap="refresh">刷新</button>

	export default {
		data () {
			return {
				list: [1,2,3,5,6]
			}
		},
		methods: {
			refresh () {
				this.list = [7,8,9,10,11]
				this.$refs.flip.refresh()
			}
		}
	}