老师,发现一个bug

老师,发现一个bug

点击banner图展示gallary之后,绑定在window上的scroll事件会生效(因为属于同一页面),有没有什么解决办法呢,只能把gallary放在另一个页面吗?

http://img1.sycdn.imooc.com//climg/604591c709e79ec404680808.jpg

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学您好,由于这个bug需要重新梳理逻辑关系,因此需要稍微晚一点给您解决方案,您可以先继续往下学习,等老师这边整理好解决方案,再进行修改即可。

祝学习愉快!

  • 这个bug怎么解决呢😘

    2021-08-20 13:55:53
  • 同学你好,老师对“weixin_慕斯卡0244867”这位同学的问题有些疑惑。项目中,头部与gallary虽然处于不同的组件中,但是最终的渲染结果,二者是在同一个页面上的。此时滚动页面,可以触发window的scroll事件。可以如下这样测试:

    http://img1.sycdn.imooc.com//climg/611f6ab0091de8b208410320.jpg

    http://img1.sycdn.imooc.com//climg/611f6ab2097068a210910231.jpg

    http://img1.sycdn.imooc.com//climg/611f6b01092972f007000289.jpg

    http://img1.sycdn.imooc.com//climg/611f6bbf0a70aa9908450296.jpg

    通过上面的gif图可以看出,scroll事件执行了,并且头部透明度会跟着变化。

    我们还可以在普通html页面中,测试一下:

    http://img1.sycdn.imooc.com//climg/611f6c030999e94912100907.jpg

    div就类比于gallary,它是固定定位,滑动页面时,可以触发scroll事件:

    http://img1.sycdn.imooc.com//climg/611f6c550a95484009890451.jpg

    请两位同学耐心等待一下,我会和“好帮手慕白 ”老师沟通一下,交流一下想法和对问题理解,再给两位同学回复。

    祝学习愉快!

    2021-08-20 16:49:39
  • 同学你好,这个需要使用一个叫vue-scroll-lock的插件来解决,请参考如下步骤进行操作

    1、打开命令窗口,进入到项目文件夹下,输入npm install vue-scroll-lock安装这个插件,如下图:

    http://img1.sycdn.imooc.com//climg/61273df409f9a16008880500.jpg

    2、在main.js文件中引入这个插件及声明

    http://img1.sycdn.imooc.com//climg/61273e4509be6def08390732.jpg

    3、在Detail.vue页面使用<scroll-lock></scroll-lock>包裹banner子组件

    http://img1.sycdn.imooc.com//climg/61273ec209f0568007860408.jpg

    希望可以帮到你,祝学习愉快!

    2021-08-26 15:12:16
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师