vue 개발 모 바 일 에서 better-scroll 을 사용 할 때 click 이벤트 가 실 효 된 해결 방안

최근 vue 를 사용 하여 모 바 일 엔 드 를 개발 하 는 프로젝트 를 배 웠 고 better-scroll 플러그 인 을 사용 하여 스크롤 을 했 습 니 다.
better-scroll 을 도입 한 구성 요소 에서@click 이 벤트 를 사용 할 때 이벤트 가 효력 을 잃 습 니 다.v-on:click,v-bin:click,@click.native 가 모두 안 됩 니 다.@touch start 를 시도 해 보 았 지만 가능 합 니 다.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 은 드 롭 다운 리 셋 방법 입 니 다.touch End 는 드 롭 다운 리 셋 후에 발생 하 는 함수 이 고 다른 방법 도 많 습 니 다.예 를 들 어 드 롭 다운 으로 더 많이 불 러 오 는 등 홈 페이지 문서 에서 볼 수 있 습 니 다.
다음 전역 에 이 구성 요 소 를 등록 합 니 다.main.js 에 있 습 니 다.

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

다른 구성 요소 에서 사용
예 를 들 어 우 리 는 얼 라벨 안의 내용 을 스크롤 효과 가 있 게 하려 면 이렇게 쓸 수 있다.

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

패키지 방법 으로 props 를 통 해 통신 하면 됩 니 다.

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

이렇게 하면 페이지 에 이 스크롤 효과 가 있 습 니 다.그러나 주의해 야 합 니 다.그것 은 우리 의 많은 원생 방법 을 덮 을 것 입 니 다.그러나 그 가 대응 하 는 것 도 해결 방법 이 있 습 니 다.그 내부 의 속성 으로 예 를 들 어 페이지 의 닻 점 이 뛰 는 것 과 같 습 니 다.
나 는 포 장 된 구성 요소 에 Y 축 이 이동 하도록 하 는 방법 을 썼 다.

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

어떻게 쓰 지?
사용 할 페이지 에서 이 방법 을 호출 합 니 다.
handle ToScrolltop(),괄호 안에 대응 하 는 offsetTop 을 올 리 면 됩 니 다.
이상 은 개인 적 인 경험 이 므 로 여러분 에 게 참고 가 되 기 를 바 랍 니 다.여러분 들 도 저 희 를 많이 응원 해 주시 기 바 랍 니 다.