当前位置: 首页 > 网络应用技术

优化H5的滚动函数:使用VUE和React中更好的插件的坑坑的凹坑

时间:2023-03-08 16:46:46 网络应用技术

  最近,该公司网站项目开发的H5版本是Vue。为了更好地优化滚动效果并实现一些相关功能,您选择使用Better -Scroll的插件。我认为效果非常好,并且我将此插件整合在我的博客中。

  安装(建议安装按需插件的核心版本)

  在Vue中使用滚动组件滚动。

  index.vue

  使用该组件后,通过此获取插件-in实例的示例。

  在React中使用组件bscroll.tsx

  index.tsx

  有关详细的配置信息,请参阅官方网站https://better-scrol.github.io/docs/zh-cn/

  问题和解决方案1.在首次使用中,会出现令人讨厌的情况,因为滚动内容的高度小于容器的高度

  2.如果您的内容中有很多图片,则一半的滚动内容将不会滚动。原因是IMG标签不是异步。IMG尚未加载。导致计算高度不准确;如果您有其他操作,它将改变DOM的高度,这也会导致计算高度不准确。

  Better-Scroll具有重新计算高度的刷新(),并且在监视图片加载中完成了呼叫

  或使用更好的滚动插件和

  安装

  将其安装到实例bs.use(观察-dom),将其配置为更好的滚动

  3.使用更好的螺旋式手动触摸屏幕以停止滑动,并且会有一种震动现象

  作者还解释说,可以使用JS动画解决属性中的用户疗法:false。

  原始:https://juejin.cn/post/7100056208186277925