优化h5的滚动功能:在vue和react中使用better-sroll插件的踩坑笔记
发布网友
发布时间：2024-10-01 17:18
共1个回答
热心网友
时间：2024-11-10 14:01
最近在开发公司网站项目的h5版本，技术栈是vue，为了更好的优化滚动效果，以及实现一些相关的功能，就选择使用better-scroll这个插件。觉得效果很不错，我又在自己写着玩的博客中集成了这个插件。
使用经验安装（推荐安装core版本按需引入插件）yarnadd@better-scroll/core
在vue中的使用封装一个滚动组件Scroll.vue
<divclass="wrapper"ref="wrapper"><divclass="content"><slot></slot></div></div></template><script>importBScrollfrom"better-scroll";exportdefault{data(){return{bs:"",positionY:0};},props:{},mounted(){this.bs=newBScroll(this.$refs.wrapper,{click:true,observeDOM:true,observeImage:true,scrollX:false,probeType:3,useTransition:false,mouseWheel:true,});},methods:{scrollToEl(el,time=500){this.bs.scrollToElement(el,time);},},};</script><stylescoped></style>index.vue
<template><bscroll>//content..........</bscroll></template><script>methods:{btnTab(index){this.currentIndex=index;},btnTopTab(index){this.currentTopIndex=index;if(index===0){this.$refs.scrollRef.scrollToEl(this.$refs.topControlRef);}elseif(index===1){this.$refs.scrollRef.scrollToEl(this.$refs.explainRef);}elseif(index===2){this.$refs.scrollRef.scrollToEl(this.$refs.questionRef);}},},</script>使用组件后通过this.$refs.bscroll.bs的方式获取插件实例使用方法
在react中使用组件bscroll.tsx
import{FC,ReactElement,useEffect,useRef,useState}from"react";importBScrollfrom"@better-scroll/core";import{BScrollWrapper}from"./style";importObserveDOMfrom"@better-scroll/observe-dom";importObserveImagefrom"@better-scroll/observe-image";importPullupfrom"@better-scroll/pull-up";//typeimportBScrollInstancefrom"@better-scroll/core";interfaceIpullup{pullup:(x?:BScrollInstance)=>void;}BScroll.use(ObserveDOM);BScroll.use(ObserveImage);BScroll.use(Pullup);constHome:FC<Ipullup>=(props):ReactElement=>{constwrapper=useRef<any>(null);const[bscroll,setbscroll]=useState<BScrollInstance>();useEffect(()=>{constbs:BScrollInstance=newBScroll(wrapper.current,{click:true,scrollY:true,observeDOM:true,observeImage:true,pullUpLoad:{threshold:-100},useTransition:false,mouseWheel:true,});setbscroll(bs);},[]);useEffect(()=>{props.pullup(bscroll)},[props,bscroll]);return<BScrollWrapperref={wrapper}>{props.children}</BScrollWrapper>;};exportdefaultHome;index.tsx
......constpullup=(bs?:BScrollInstance)=>{bs?bs.on("pullingUp",()=>{if(pageTotal===page){console.log("没有更多内容了");}else{dispatch(getPageAction(page+1));}bs.refresh();bs.finishPullUp();}):console.log();};return(<BScrollpullup={pullup}>......</BScroll>详细的配置信息请看官网https://better-scroll.github.io/docs/zh-CN/
问题和解决办法1、在第一次使用时会出现无法滚动的情况，原因是滚动需要内容的高度小于容器的高度
2、如果你的content里有很多的图片，那么会出现滚动到内容的一半就滚不下去了这种情况，原因是img标签是异步加载，img还没有加载完，better-scroll就计算了高度，导致了计算高度的不准确；如果你有其他操作会改变dom的高度，这也会导致计算高度不准确。
better-scroll有refresh()可以重新计算高度，在监听图片加载完成调用
或使用better-scroll的插件observe-dom和observe-image
安装yarnadd@better-scroll/observe-dom?yarnadd@better-scroll/observe-image?
挂载到实例bs.use(observe-dom),配置到better-scroll即可
3、在项目使用better-scroll手动触摸屏幕让滑动停止，会有抖动现象
作者也做出了解释，在属性中配置useTransition:false使用js动画就能解决。
点个赞支持一下叭?原文：https://juejin.cn/post/7100056208186277925