美文网首页
解决mpvue中scroll-view组件scroll-top不

解决mpvue中scroll-view组件scroll-top不

作者: 半夏_e0a2 | 来源:发表于2019-08-16 00:28 被阅读0次

因为公司业务需求,一个项目需要在多平台展示,公司前端用的是vue框架,本着代码复用的想法,所以选择了小程序的mpvue框架,可是mpvue的坑,多如牛毛,今天就来记录下遇到的小坑之一,以及简单的叙述下解决方案。

不仅是在h5页面还是在小程序中,只要页面顶部或者底部有fixed的元素,那么页面在滚动的时候,都会出现回弹或者闪动的情况,使用微信小程序官方的api,wx.pageScrollTo来滚动页面,就会导致fixed的元素都会出现闪动的情况,查阅了网上的一些资料,建议用scroll-view来代替,但是在vue文件中直接使用scroll-view组件,他的scroll-top是失效的。这就很头疼了。后来选了一种另外的方式,组件引入的方式。

pages目录下某页面json文件中配置组件引入 static目录下chatroom组件的文件目录

用组件引入的方式,可以在wxml中使用scroll-view组件,并且scroll-top属性有效

注意:mpvue中组件引入的方式,必须把组件目录放在static目录下面,不可以放在别的目录下,在run build之后,只有static文件夹是不会被编译的。用scroll-view的scroll滚动,就不会影响整个页面的scrolltop,从而发生fixed元素闪动的问题。

相关文章

网友评论

      本文标题:解决mpvue中scroll-view组件scroll-top不

      本文链接:https://www.haomeiwen.com/subject/ifabkxtx.html