vue滚动组件关于定位的一个小问题

最新推荐文章于 2024-09-06 16:12:22 发布

aiamvb6455

最新推荐文章于 2024-09-06 16:12:22 发布

阅读量167

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Jasonpub/p/10576242.html

版权

vue集成better-scroll插件关于层级定位问题

在项目中常常会用到无缝滚动

下面附上案例关于better-scroll的使用

html部分：

<template>
    <div class="works">
        <div class="wrapper scrollWork" ref="MyWrapper">
            <div class="content">
                <ProCollection></ProCollection>
            </div>
        </div>
    </div>
</template>

JavaScript部分

import ProCollection from './ProCollection'//导入列表组件
import BScroll from 'better-scroll'//导入第三方组件
export default {
        name: "Works",
        components: {
            ProCollection
        },
        mounted() {
            this.scroll = new BScroll(this.$refs.MyWrapper, {
                //只有设置成true pullingUp才能使用
                pullUpLoad: true,
                click: true,
                probeType: 2
            });

            this.scroll.on("scroll", ({x, y}) => {
                // console.log(y);
                if (y < -970) {
                    this.flag = true;
                } else {
                    this.flag = false;
                }
            });
        }
    }

<style scoped lang="scss">
    .works {
        width: 100%;
        height: 100%;
    }

    .works .scrollWork {
        height: 100%;
        width: 100%;
        z-index: 4; /*其他组件层级大于本组件*/
        padding: 0 10px;
        position: fixed; /*在当前页面的其他组件必须使用定位才能正常滚动*/
        top: 478px;
    }
</style>

转载于:https://www.cnblogs.com/Jasonpub/p/10576242.html