因为公司业务需求,一个项目需要在多平台展示,公司前端用的是vue框架,本着代码复用的想法,所以选择了小程序的mpvue框架,可是mpvue的坑,多如牛毛,今天就来记录下遇到的小坑之一,以及简单的叙述下解决方案。
不仅是在h5页面还是在小程序中,只要页面顶部或者底部有fixed的元素,那么页面在滚动的时候,都会出现回弹或者闪动的情况,使用微信小程序官方的api,wx.pageScrollTo来滚动页面,就会导致fixed的元素都会出现闪动的情况,查阅了网上的一些资料,建议用scroll-view来代替,但是在vue文件中直接使用scroll-view组件,他的scroll-top是失效的。这就很头疼了。后来选了一种另外的方式,组件引入的方式。


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