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的高度不超过父容器的高度，是不能滚动的

<template>
  	<section class="goodsInfoWrap" v-if="goods.projectName">
        <div class="contentList" ref="listWrapperL">
            <!-- 滑动的部分, 需用盒子包裹 -->
            <div>
                <!-- 省略内容  注意：content 的高度不超过父容器的高度，是不能滚动的-->
                
				
                <!-- 商品介绍 -->
                <section class="goodsDetail" id="boxItem" ref="boxItem">
                    <div class="tip">
                        <img src="../../assets/images/icon/productDesc.jpg" alt="">
                    </div>
                    <div class="goodsContent" v-html="goods.projectDetailed"></div>
                </section>
            </div>
        </div>
       
		<!-- 固定title -->
	    <section class="topFixed" v-show="isScroll" :class="isScroll == true ? 'isFixed' : ''" @click="toReferrals">
	        <div class="lefts">奖励:{{goods.commissionOne}}%</div>
	        <div class="rights">
	            <div class="btn">
	                <div>点击我吧</div>
	            </div>
	        </div>
	    </section>
  	</section>
</template>

初始化及使用better-scroll

<script>
    import BScroll from 'better-scroll';
    export default {
        name: 'goodsInfo',
        data() {
            return {
                isScroll: false, //显示固定元素
                scrollY: '',
            }
        },
        mounted() {
            //在mounted中初始化 better-scroll
            //备注: 这里延迟操作,根据个人使用
            setTimeout(() => {
                this.initScroll();
            }, 20)
        },
        destroyed() {
           this.$refs.listScroll && this.$refs.listScroll.destroy()
       	},
        methods: {
            destroy() {
            	// 销毁 better-scroll，解绑事件
                this.listScroll.destroy()
            },
            initScroll() {
                this.$nextTick(()=>{
                    if (!this.$refs.listWrapperL) {
                        return
                    }
                    //配置: 可根据个人需求
                    this.listScroll = new BScroll(this.$refs.listWrapperL,{
                        probeType: 3, // 是否会截流scroll事件
		                scrollY: true,  // 是否开启Y轴滚动方向
		                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的高度不超过父容器的高度，是不能滚动。这个官网已说明原理

相关文章：
better-scroll商品详情联动