vue踩坑笔记 九.移动端vue坑

移动端vue页面禁止移动/滚动

方法一(左右滑动都禁止)

当需要在移动端中禁止页面滚动，加入：@touchmove.prevent即可，
代码如下

<template>
  <div @touchmove.prevent>
    <h3 class="main-bk">{
     {
      title }}</h3>
    <p>您好！{
     {
     provider}}：</p>
  </div>
</template>

参考链接

方法二(仅禁止左右滑动)

直接在根节点上或者app.vue上加上这几行css

touch-action:none;
touch-action:pan-y;

移动端Vue路由跳转到新页面时 默认在页面最底部 而不是最顶部

方法一

mounted () 
    this.$router.afterEach((to, from, next) => {
     
        window.scrollTo(0, 0)
    })
}

方法二

在router.js中配置

export default new Router({
     
  routes: [
    {
     
      path: '/',
      name: 'Home',
      component: Home
    },
    /* .... */
  ],
  scrollBehavior (to, from, savedPosition) {
     
    return {
      x: 0, y: 0 }
  }
})

全局事件忘记解绑

例如我们可以监听页面滚动

mounted () {
     
    window.addEventListener('scroll', this.handleScroll)
  },

但是仅仅这么写的话,在其他组件中滚动也会触发这个函数,导致bug

解决方法

在绑定事件至全局后,一定记得解绑

mounted () {
     
    window.addEventListener('scroll', this.handleScroll)
  },
  unmounted () {
     
    window.removeEventListener('scroll', this.handleScroll)
  }