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

36 篇文章 2 订阅
9 篇文章 0 订阅

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

ps: 实现某元素吸顶滑动某个元素时固定显示 ,反之隐藏(根据需求)

使用: 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商品详情联动

评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值