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

因为公司业务需求,一个项目需要在多平台展示,公司前端用的是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元素闪动的问题。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 使用手册 mpvue继承自Vue.js,其技术规范和语法特点与Vue.js保持一致。 本文档适用于有一定Vue.j...
    眼镜蛇阅读 6,483评论 0 0
  • 美团小程序框架mpvue(花名:没朋友)蹲坑指南 第一次接触小程序大概是17年初,当时小程序刚刚内侧,当时就被各种...
    noahlam阅读 7,338评论 3 32
  • 本章涉及知识点1、前言2、mpVue框架简介3、项目配置和结构4、主程序入口配置5、首页页面6、城市选择页面7、搜...
    PrivateEye_zzy阅读 31,289评论 30 112
  • vue去哪网跟学笔记 记录学习点滴 1. 初始化项目 1.1 手机显示配适 minimum-scale=1.0,m...
    noobakong阅读 6,835评论 0 16
  • 1、海纳百川的意思是说 你不能保证每一滴水都是干净的 但你要有豁达的胸怀让它流出来 你不能保证别的什么 也不能要求...
    快乐的小木阅读 6,014评论 2 51