1.优化h5的滑动滑动滚动功能：在vue和react中使用better-sroll插件的踩坑笔记
2.仿抖音视频全屏播放&滑动切换

优化h5的滚动功能：在vue和react中使用better-sroll插件的踩坑笔记

       前言

       最近在开发公司网站项目的h5版本，技术栈是出现vue，为了更好的内容优化滚动效果，以及实现一些相关的滑动滑动预定建站源码功能，就选择使用better-scroll这个插件。出现觉得效果很不错，内容java 源码阅读网我又在自己写着玩的滑动滑动博客中集成了这个插件。

使用经验安装（推荐安装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=){ 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:-},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>

       详细的配置信息请看官网/post/

仿抖音视频全屏播放&滑动切换

       本文讲述通过H5实现仿抖音视频全屏播放&滑动切换的效果，适用于我司直播回放视频。内容实现方法由Vue进行模板层代码实现，滑动滑动三个主要节点上下排列，出现用于显示视频封面等信息，内容中间为实际视频信息，滑动滑动2022海南溯源码真假支持用户滑动查看。出现自动切换动画在动画结束后，内容通过隐式界面数据切换实现无限加载。文字向右对齐源码视频全屏使用模拟全屏方式，防止iOS默认全屏播放问题。视频自动播放在移动端实现困难，纳斯足球直播源码需配合客户端修改webview容器参数。遇到play方法错误，通过Promise对象的catch来捕获错误信息，对用户进行友好引导和错误上报。连续滑动流畅性是当前方案的局限，期待更好的解决方案。欢迎在评论区提出您的想法。