8.1 KiB
8.1 KiB
#使用须知
- 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()
}
}
}