更新记录

1.0.8（2024-03-29）

修复app-vue初始化报错，并且无法翻页的问题

1.0.7（2024-03-29）

恢复微信小程序使用插槽的方式
保留微信小程序引入子组件的方式

1.0.6（2024-03-06）

添加vue3兼容
修改微信小程序使用方式（为了提高性能以及兼容vue3）如果使用过该组件编写微信小程序的开发者，没有什么问题可以不用更新，避免出错

平台兼容性

Vue2	Vue3
√	√

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
HBuilderX 3.1.0 app-vue app-nvue	×	√	×	×	×	×

钉钉小程序	快手小程序	飞书小程序	京东小程序
×	×	×	×

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
√	√	√	√	√	×	√	√	√

使用须知

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

props属性

属性名	类型	默认值	可选值	说明
data	Array	----	----	列表数据
componentName	String	----	----	控制微信小程序在子组件的显示
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="`wx:${index}`">
        <!-- #endif -->
            <view style="height: 100vh">
                <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 component-name="your-component" :data="list" style="height: 100vh;"></yingbing-flip>

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

自己定义的组件基本结构

<view style="height: 100%">
    <text style="font-size: 50px;font-weight: bold;color: #fff;">{{item}}</text>
</view>

export default {
    props: {
        item: {
            type: Number,
            default: 0
        },
        index: {
            type: Number,
            default: 0
        }
    }
}

在mpChild组件当中引入（组件位置uni_modules/yingbing-flip/modules/mpChild.vue）

<view>
<!-- 在这里引入你的组件 -->
<your-component :item="item" :index="index" v-if="componentName == 'your-component'"></your-component>
</view>

import YourComponent from '@/components/YourComponent'
export default {
    components: {
        YourComponent
    },
    props: {
        item: {
            type: [Object, String, Number],
            default () {
                return new Object
            }
        },
        index: {
            type: Number,
            default: 0
        },
        componentName: {
            type: String,
            default: ''
        }
    }
}

垂直滑动

    <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="`wx:${index}`">
        <!-- #endif -->
            <view style="height: 100vh">
                <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="`wx:${index}`">
        <!-- #endif -->
            <view style="height: 100vh">
                <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="`wx:${index}`">
        <!-- #endif -->
            <view style="height: 100vh">
                <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="`wx:${index}`">
        <!-- #endif -->
            <view style="height: 100vh">
                <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="`wx:${index}`">
        <!-- #endif -->
            <view style="height: 100vh">
                <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()
            }
        }
    }

好用翻页组件翻页

更新记录

1.0.8（2024-03-29）

1.0.7（2024-03-29）

1.0.6（2024-03-06）

平台兼容性

使用须知

props属性

event事件

内置方法

slot插槽

快速开始

引入子组件的使用方式（仅支持微信小程序）

垂直滑动

下拉刷新

上拉加载

JS控制滑动

刷新组件

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

好用视频播放器

小说和漫画阅读器（好用阅读器）

好用阅读分页插件

好用聚合

好用音频播放器

好用翻页组件 翻页

更新记录

1.0.8（2024-03-29）

1.0.7（2024-03-29）

1.0.6（2024-03-06）

平台兼容性

使用须知

props属性

event事件

内置方法

slot插槽

快速开始

引入子组件的使用方式（仅支持微信小程序）

垂直滑动

下拉刷新

上拉加载

JS控制滑动

刷新组件

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

好用视频播放器

小说和漫画阅读器（好用阅读器）

好用阅读分页插件

好用聚合

好用音频播放器

Modal title

好用翻页组件翻页