更新记录

1.0.1（2023-07-07） 下载此版本

页面滚动条置顶和页面内组件里的滚动条置顶

1.0.0（2023-06-20） 下载此版本

初始版本

平台兼容性

piaoyi-backTop 一键置顶

本插件有两种功能，一种是页面下组件内部的一键置顶，一种是页面的一键置顶

两种使用方法(即一套代码两种功能)：

第一种：使用插槽

内部使用了scroll-view组件，直接传入需要渲染的列表即可，这种是实现了页面里面嵌入组件，组件内滚动条置顶，解决了市场上页面里面引入组件，组件无法置顶的问题

<template>
    <view class="backtop">
        <piaoyi-back-top :scrollMins="scrollMins">
            <view class="bigbox">
                <view class="box-item" v-for="(item, index) in list" :key="index">
                    {{item}}
                </view>
            </view>
        </piaoyi-back-top>
    </view>
</template>

<script>
    import piaoyiBackTop from '@/components/piaoyi-backTop/piaoyi-backTop.vue'
    export default {
        data() {
            return {
                scrollMins: 100,
                list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11, 12, 13, 14, 15, 16, 17, 18, 19, 20,21, 22, 23, 24, 25, 26, 27, 28, 29, 30,31, 32, 33, 34, 35, 36, 37,38, 39, 40]
            };
        },
        components: {
            piaoyiBackTop
        }
    }
</script>

<style lang="scss" scoped>
    .backtop {
        background: #eee;
        .bigbox {
            .box-item {
                padding: 30rpx 0;
                text-align: center;
                font-size: 32rpx;
                line-height: 32rpx;
                color: #333;
                background: #fff;
                margin-bottom: 20rpx;
            }
        }
    }
</style>

Prop

第二种：不使用插槽 不使用插槽，即组件内不写插槽，这个的功能就是页面的一键置顶，使用的是页面的滚动监听，请务必仔细阅读下面示例代码

<template>
    <view class="backtop">
        <view class="bigbox">
            <view class="box-item" v-for="(item, index) in list" :key="index">
                {{item}}
            </view>
        </view>
        <piaoyi-back-top :isShow="scrollMins < scrollTop">
            <!-- <view class="bigbox">
                <view class="box-item" v-for="(item, index) in list" :key="index">
                    {{item}}
                </view>
            </view> -->
        </piaoyi-back-top>
    </view>
</template>

<script>
    import piaoyiBackTop from '@/components/piaoyi-backTop/piaoyi-backTop.vue'
    export default {
        data() {
            return {
                scrollMins: 100,
                scrollTop: 0,
                list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11, 12, 13, 14, 15, 16, 17, 18, 19, 20,21, 22, 23, 24, 25, 26, 27, 28, 29, 30,31, 32, 33, 34, 35, 36, 37,38, 39, 40]
            };
        },
        components: {
            piaoyiBackTop
        },
        mounted() {

        },
        onPageScroll(res) {
            this.scrollTop = res.scrollTop
        }
    }
</script>

<style lang="scss" scoped>
    .backtop {
        background: #eee;
        .bigbox {
            .box-item {
                padding: 30rpx 0;
                text-align: center;
                font-size: 32rpx;
                line-height: 32rpx;
                color: #333;
                background: #fff;
                margin-bottom: 20rpx;
            }
        }
    }
</style>

Prop

可接定制化组件开发

右侧有本人代表作小程序二维码，可以扫码体验

如使用过程中有问题或有一些好的建议，欢迎加QQ群互相学习交流：120594820