#使用须知
* 1、这是一个翻页组件，适用于小说翻页或答题功能
* 2、这个插件支持APP-NVUE、APP-VUE、H5、微信小程序
* 3、该组件滑动项同时只能存在当前项、前面项、后面项3个，其余项会被销毁
* 4、如果想要构建阅读器需要配合[好用阅读分页插件](https://ext.dcloud.net.cn/plugin?id=6026)使用
* 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 | 上拉加载失败提示 |
#快速开始
```html
{{item}}
```
```javascript
export default {
data () {
return {
list: []
}
},
onReady () {
for ( let i = 0; i < 10; i++ ) {
this.list.push(i)
}
}
}
```
#垂直滑动
```html
{{item}}
```
```javascript
export default {
data () {
return {
list: []
}
},
onReady () {
for ( let i = 0; i < 10; i++ ) {
this.list.push(i)
}
}
}
```
#下拉刷新
```html
{{item}}
下拉刷新
松开刷新
正在刷新
刷新成功
刷新失败
```
```javascript
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)
}
}
}
```
```css
.pulldown {
display: flex;
align-items: center;
justify-content: center;
/* #ifdef APP-NVUE */
flex: 1;
/* #endif */
/* #ifndef APP-NVUE */
width: 100%;
height: 100%;
/* #endif */
}
```
#上拉加载
```html
{{item}}
上拉加载
松开刷新
正在刷新
刷新成功
刷新失败
```
```javascript
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)
}
}
}
```
```css
.pulldown {
display: flex;
align-items: center;
justify-content: center;
/* #ifdef APP-NVUE */
flex: 1;
/* #endif */
/* #ifndef APP-NVUE */
width: 100%;
height: 100%;
/* #endif */
}
```
#JS控制滑动
```html
{{item}}
```
```javascript
export default {
data () {
return {
list: [1,2,3,5,6]
}
},
methods: {
flipToNext () {
this.$refs.flip.flipToNext()
},
flipToPrev () {
this.$refs.flip.flipToPrev()
}
}
}
```
#刷新组件
```html
{{item}}
```
```javascript
export default {
data () {
return {
list: [1,2,3,5,6]
}
},
methods: {
refresh () {
this.list = [7,8,9,10,11]
this.$refs.flip.refresh()
}
}
}
```