vue使用better-scroll监听滑动事件
vue使用better-scroll监听滑动效果
ps: 实现某元素吸顶 或 滑动到某个元素时固定显示 ，反之隐藏（根据需求）
使用：
better-scroll插件写的不好，不足之处，欢迎大家指导， 谢谢！
文章目录
- vue使用better-scroll监听滑动效果
- 效果图
- 前提准备
- template
- 初始化及使用better-scroll
- 样式scss
效果图
- 当滑到 商品介绍 时， 显示元素，否则隐藏
前提准备
- 安装：
npm i better-scroll -S - 组件中引入：
import BScroll from 'better-scroll' - better-scroll官网
- 参考: better-scroll参数和方法
template
<template> <section class="goodsInfoWrap" v-if="goods.projectName">
<div class="contentList" ref="listWrapperL">
<!-- 滑动的部分, 需用盒子包裹 -->
<div>
<!-- 省略 -->
<!-- 商品介绍 -->
<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();
}, 600)
},
methods: {
destroy() {
this.listScroll.destroy()
},
destroyed() {
this.$refs.listScroll && this.$refs.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;
}
以上是 vue使用better-scroll监听滑动事件 的全部内容， 来源链接： utcz.com/z/377795.html
