supermall项目相关知识点总结

最新推荐文章于 2024-09-09 11:03:57 发布

m0_56752010

最新推荐文章于 2024-09-09 11:03:57 发布

阅读量199

点赞数

文章标签： html css vue.js

本文链接：https://blog.csdn.net/m0_56752010/article/details/120230430

版权

本文总结了在Vue项目中使用Better-Scroll实现滚动功能，包括监听滚动、上拉加载和防止频繁刷新。同时，介绍了如何处理图片加载后更新滚动区域的问题，以及实现吸顶效果的步骤。此外，讨论了时间戳转换、Fastclick解决移动端延迟、Vue-lazyload图片懒加载、px2vw单位转换、nginx部署和Vue响应式原理等关键知识点。

摘要由CSDN通过智能技术生成

1.原生js实现局部滚动功能：
在这里插入图片描述

2.Better-Scroll的用法：
- 在index.html中使用Better-Scroll：
* 监听滚动：probeType: 0 / 1 / 2 / 3
bscroll.on(‘scroll’,(position)=>{})
* 上拉加载：pullUpLoad:true
bscroll.on(‘pullingUp’,()=>{})
* click:false button 可以监听点击
div 等其他元素不可以
click:true 必须要设置
在这里插入图片描述

- 在Vue项目中使用 Better-Scroll：
*
- 解决首页中 Better-Scroll 可滚动区域的问题：
* Better-Scroll 在决定有多少区域可以滚动时，是根据 ScrollerHeight 属性决定的；
* ScrollerHeight 属性是根据放在 Better-Scroll 的 content 中的子组件的高度；
* 但是我们的首页中，刚开始在计算ScrollerHeight 属性时，是没有将图片计算在内的；
* 所以，计算出来的结果是错误的（1300+）；
* 后来图片加载进来之后有了新的高度，但是ScrollerHeight 属性并没有进行更新，
* 所以滚动出现了问题；
如何解决问题？
* 监听每一张图片是否加载完成，只要有一张图片加载完成了，执行一次 refresh()；
如何监听图片加载完成了？
* 原生的 js 监听图片：img.οnlοad=function(){}
* Vue中监听：@load=‘方法名’
* 调用 scroll 的 refresh()

如何将 GoodsListItem.vue 中的事件传入到 Home.vue 中？
* 因为涉及到非父子组件的通信，所以这里我们选择了 事件总线；
* bus —> 总线
* Vue.prototype. $b u s = n e w V u e () - - - - > m a i n . j s 中 *$