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

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

       前言

       最近在开发公司网站项目的h5版本，技术栈是出现vue，为了更好的内容优化滚动效果，以及实现一些相关的滑动滑动eclipse导入php源码功能，就选择使用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=){ 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进行模板层代码实现，滑动滑动三个主要节点上下排列，出现用于显示视频封面等信息，内容中间为实际视频信息，滑动滑动人人转源码支持用户滑动查看。出现自动切换动画在动画结束后，内容通过隐式界面数据切换实现无限加载。jemeter源码分析视频全屏使用模拟全屏方式，防止iOS默认全屏播放问题。视频自动播放在移动端实现困难，5173源码防护需配合客户端修改webview容器参数。遇到play方法错误，通过Promise对象的catch来捕获错误信息，对用户进行友好引导和错误上报。连续滑动流畅性是当前方案的局限，期待更好的解决方案。欢迎在评论区提出您的想法。