最近,该公司网站项目开发的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