vue开发移动端使用better-scroll时click事件失效的解决方案

 更新时间:2021年07月08日 11:59:01   作者:Elsa_Panda  
这篇文章主要介绍了vue开发移动端使用better-scroll时click事件失效的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

最近使用vue学习开发移动端的项目,使用了better-scroll插件做滚动。

在引入better-scroll的组件中使用@click事件的时候,点击事件失效,v-on:click、v-bind:click、@click.native都不行,试了一下@touchstart是却是可以的,发现better-scroll的配置中没有设置click:true,设置过之后click事件成功。

后来在使用vuex的时候一直报

[vuex] unknown mutation type: changeCity

才发现在store文件中将mutations写在了state里面,被自己蠢哭了。。。

正确写法如下:

vue better-scroll的封装以及使用

相信做一些移动端项目,很多都用了better-scroll这个滚动插件,它能让我们页面的滚动变得不那么僵硬,同时也能让我们实现一些锚点等功能更简单

注:这个插件只有当你要滚动的内容高度大于你的父盒子的高度才行

首先就npm安装这个插件了

npm i better-scroll --save

接着我们封装一个Better组件,这样在全局都能复用

<template>
  <div class="wrapper" ref="wrapper" :style="{height:allHeight}">
   <slot></slot>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  data() {
    return {
      allHeight:''
    }
  },
  props:{
    handleToScroll:{
      type:Function,
      default:function(){}
    },
    handleToTouchEnd:{
      type:Function,
      default:function(){}
    }
  },
  methods: {
    handleToScrolltop(y){
      this.scroll.scrollTo(0,y)
    }
  },
  mounted() {
    var scroll = new BScroll(this.$refs.wrapper,{
      tap:true,
      probeType:1
    })
    this.scroll = scroll
     scroll.on('scroll',(pos)=>{
       this.handleToScroll(pos)
     })
     scroll.on('touchEnd',(pos)=>{
       this.handleToTouchEnd(pos)
     })

  let dangqian = this.$refs.wrapper.offsetTop
  let zongaodu = document.documentElement.clientHeight
  let all = zongaodu-dangqian
  this.allHeight = all +"px"
  },
}
</script>
<style>
</style>   

动态绑定allHeight是为了让父盒子的高度永远为它到页面最底部的高度,通过计算出来,这样更有利于实现

同时封装两个方法,一个scroll是下拉刷新方法,touchEnd则是下拉刷新之后触发的函数,也有很多其他的方法,例如上拉加载更多等等,可以去官网文档中查看

接下来全局注册这个组件,在main.js中

import Scroller from './components/content/Scroller'
Vue.component('Scroller',Scroller)

在其他组件使用

比如我们想让ul标签里面的内容有滚动效果,就可以这样写

 <Scroller>
 <ul>
 </ul>
</Scroller>

想用封装的方法,通过props通信即可

<Scroller :handleToScroll="handleToScroll" :handleToTouchEnd="handleToTouchEnd">

这样页面就有这个滚动效果了,但是要注意,它会覆盖我们很多的原生方法,但是他对应的也有解决方法,用它内部的属性,我举个例子,就比如页面的锚点跳转

我在封装的组件里写了一个方法,就是让y轴随着移动

  methods: {
     handleToScrolltop(y){
       this.scroll.scrollTo(0,y)
     }
   },

怎么使用呢?

在要使用的页面通过调用这个方法

handleToScrolltop(),括号里面放上对应的offsetTop即可

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue使用z-tree处理大数量的数据以及生成树状结构

    Vue使用z-tree处理大数量的数据以及生成树状结构

    这篇文章主要介绍了Vue使用z-tree处理大数量的数据以及生成树状结构方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • vue3 ref获取组件实例详细图文教程

    vue3 ref获取组件实例详细图文教程

    在Vue3中可以使用ref函数来创建一个响应式的变量,通过将ref函数应用于一个组件实例,我们可以获取到该组件的实例对象,这篇文章主要给大家介绍了关于vue3 ref获取组件实例的详细图文教程,需要的朋友可以参考下
    2023-10-10
  • ant design vue的form表单取值方法

    ant design vue的form表单取值方法

    这篇文章主要介绍了ant design vue的form表单取值方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • Vue el-table表头上引入组件不能实时传参解决方法分析

    Vue el-table表头上引入组件不能实时传参解决方法分析

    这篇文章主要介绍了Vue el-table表头上引入组件不能实时传参解决方法,总的来说这并不是一道难题,那为什么要拿出这道题介绍?拿出这道题真正想要传达的是解题的思路,以及不断优化探寻最优解的过程。希望通过这道题能给你带来一种解题优化的思路
    2022-11-11
  • Vue3监听reactive对象中属性变化的方法

    Vue3监听reactive对象中属性变化的方法

    在 Vue 3 中,如果你想监听 reactive 对象中的某个属性发生的变化,你可以使用 watch 函数进行监听,watch 函数允许你观察 reactive 对象的某个属性或者整个对象,所以本文给大家介绍了Vue3监听reactive对象中属性变化的方法,需要的朋友可以参考下
    2024-08-08
  • Vue开发之watch监听数组、对象、变量操作分析

    Vue开发之watch监听数组、对象、变量操作分析

    这篇文章主要介绍了Vue开发之watch监听数组、对象、变量操作,结合实例形式分析了vue.js使用Watch针对数组、对象、变量监听相关操作技巧,需要的朋友可以参考下
    2019-04-04
  • Vue.js监听select2的值改变进行查询方式

    Vue.js监听select2的值改变进行查询方式

    这篇文章主要介绍了Vue.js监听select2的值改变进行查询方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue中路由跳转的多种方式(和$router下路由跳转的那几个方法的区别)

    vue中路由跳转的多种方式(和$router下路由跳转的那几个方法的区别)

    Vue.js是一款流行的前端JavaScript框架,它提供了多种方式来实现路由跳转,本文给大家分享vue中路由跳转的几种方式(和$router下路由跳转的那几个方法的区别),感兴趣的朋友一起看看吧
    2023-11-11
  • Vue3中操作dom的四种方式保姆级教程(推荐!)

    Vue3中操作dom的四种方式保姆级教程(推荐!)

    某些情况下,我们仍然需要直接访问底层 DOM 元素,下面这篇文章主要给大家介绍了关于Vue3中操作dom的四种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • vue如何在style标签中使用变量(数据)详解

    vue如何在style标签中使用变量(数据)详解

    在我们编写css样式中是不能直接使用vue data中的变量的,下面这篇文章主要给大家介绍了关于vue如何在style标签中使用变量(数据)的相关资料,需要的朋友可以参考下
    2022-09-09

最新评论