vue使用better-scroll监听滑动事件

vue使用better-scroll监听滑动效果

ps: 实现某元素吸顶 或 滑动到某个元素时固定显示 ，反之隐藏（根据需求）

使用： better-scroll插件
写的不好，不足之处，欢迎大家指导， 谢谢！

效果图

• 当滑到 商品介绍 时， 显示元素，否则隐藏

前提准备

• 安装： npm i better-scroll -S
• 组件中引入： import BScroll from 'better-scroll'
• better-scroll官网
• 参考: better-scroll参数和方法

template

注意 content的高度不超过父容器的高度，是不能滚动的

初始化及使用better-scroll

<script>
    import BScroll from 'better-scroll';
    export default {
        name: 'goodsInfo',
        data() {
            return {
                isScroll: false, //显示固定元素
                scrollY: '',
            }
        },
        mounted() {
            //在mounted中初始化 better-scroll
            //备注: 这里使用定时器因数据多,根据个人使用
            setTimeout(() => {
                this.initScroll();
            }, 600)
        },
        destroyed() {
           this.$refs.listScroll && this.$refs.listScroll.destroy()
       	},
        methods: {
            destroy() {
                this.listScroll.destroy()
            },
            initScroll() {
                this.$nextTick(()=>{
                    if (!this.$refs.listWrapperL) {
                        return
                    }
                    //配置: 可根据个人需求
                    this.listScroll = new BScroll(this.$refs.listWrapperL,{
                        probeType: 3,
                        scrollY: true,
                        click: true,
                        useTransition:false,  // 防止iphone微信滑动卡顿
                        bounce:true,
                        momentumLimitDistance: 5
                    });

                    this.listScroll.on('scroll', (pos) => {
                        var tops = this.$refs.boxItem.offsetTop;
                        // 使用abs绝对值（否则 pos.y拿到值是负数）
                        this.scrollY = Math.abs(Math.round(pos.y));
                        //判断滑动距离大于"商品介绍"元素时, 吸顶title,否则隐藏
                        if(this.scrollY >= tops) {
                            this.isScroll = true;
                        }else {
                            this.isScroll = false;
                        }
                   })
               });
           },
       }
    }    
</script>

样式scss

.topFixed {
    @include wh(100%, 1rem);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    background: #fff;
    @include fc;
    @include fb;
    padding: 0 0.29rem 0 0.38rem;
    box-shadow: 2.9px 5.2px 8px 0px rgba(109, 109, 109, 0.1);
    .lefts {
        @include sc(0.36rem, #fe532e);
    }
    .rights {
        .btn {
            @include fcc;
            height: 0.66rem;
            >div {
                height: 100%;
                @include sc(0.3rem, #fff);
                @include fc;
                padding: 0 0.3rem;
                background: $bc;
                @include borderRadius(0.35rem);
            }
        }
    }
}
//注意: 最外层样式宽高设置100%及定位
.contentList {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
}
.isFixed {
    position: fixed;
    background-color: #fff;
    top: 0;
    z-index: 999;
    transition: all 0.5s;
}

出现不能滚动的现象?

注意 content的高度不超过父容器的高度，是不能滚动。这个官网已说明原理