快捷導(dǎo)航

vue開(kāi)發(fā)移動(dòng)端使用better-scroll時(shí)click事件失效的解決方案

更新時(shí)間：2021年07月08日 11:59:01 作者：Elsa_Panda

這篇文章主要介紹了vue開(kāi)發(fā)移動(dòng)端使用better-scroll時(shí)click事件失效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

最近使用vue學(xué)習(xí)開(kāi)發(fā)移動(dòng)端的項(xiàng)目，使用了better-scroll插件做滾動(dòng)。

在引入better-scroll的組件中使用@click事件的時(shí)候，點(diǎn)擊事件失效，v-on:click、v-bind:click、@click.native都不行，試了一下@touchstart是卻是可以的，發(fā)現(xiàn)better-scroll的配置中沒(méi)有設(shè)置click：true，設(shè)置過(guò)之后click事件成功。

后來(lái)在使用vuex的時(shí)候一直報(bào)

[vuex] unknown mutation type: changeCity

才發(fā)現(xiàn)在store文件中將mutations寫在了state里面，被自己蠢哭了。。。

正確寫法如下：

vue better-scroll的封裝以及使用

相信做一些移動(dòng)端項(xiàng)目，很多都用了better-scroll這個(gè)滾動(dòng)插件，它能讓我們頁(yè)面的滾動(dòng)變得不那么僵硬，同時(shí)也能讓我們實(shí)現(xiàn)一些錨點(diǎn)等功能更簡(jiǎn)單

注:這個(gè)插件只有當(dāng)你要滾動(dòng)的內(nèi)容高度大于你的父盒子的高度才行

首先就npm安裝這個(gè)插件了

npm i better-scroll --save

接著我們封裝一個(gè)Better組件，這樣在全局都能復(fù)用

<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>

動(dòng)態(tài)綁定allHeight是為了讓父盒子的高度永遠(yuǎn)為它到頁(yè)面最底部的高度，通過(guò)計(jì)算出來(lái)，這樣更有利于實(shí)現(xiàn)

同時(shí)封裝兩個(gè)方法，一個(gè)scroll是下拉刷新方法，touchEnd則是下拉刷新之后觸發(fā)的函數(shù)，也有很多其他的方法，例如上拉加載更多等等，可以去官網(wǎng)文檔中查看

接下來(lái)全局注冊(cè)這個(gè)組件，在main.js中

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

在其他組件使用

比如我們想讓ul標(biāo)簽里面的內(nèi)容有滾動(dòng)效果,就可以這樣寫

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

想用封裝的方法，通過(guò)props通信即可

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

這樣頁(yè)面就有這個(gè)滾動(dòng)效果了，但是要注意，它會(huì)覆蓋我們很多的原生方法，但是他對(duì)應(yīng)的也有解決方法，用它內(nèi)部的屬性,我舉個(gè)例子，就比如頁(yè)面的錨點(diǎn)跳轉(zhuǎn)

我在封裝的組件里寫了一個(gè)方法,就是讓y軸隨著移動(dòng)

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

怎么使用呢？

在要使用的頁(yè)面通過(guò)調(diào)用這個(gè)方法

handleToScrolltop(),括號(hào)里面放上對(duì)應(yīng)的offsetTop即可

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue開(kāi)發(fā)移動(dòng)端使用better-scroll時(shí)click事件失效的解決方案

vue better-scroll的封裝以及使用

首先就npm安裝這個(gè)插件了

怎么使用呢？

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue開(kāi)發(fā)移動(dòng)端使用better-scroll時(shí)click事件失效的解決方案

vue better-scroll的封裝以及使用

首先就npm安裝這個(gè)插件了

怎么使用呢？

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

怎么使用呢？