Vue モバイル開発で better-scroll を使用するときにクリック イベントが失敗する問題の解決策

最近、モバイル プロジェクトの開発方法を学ぶために vue を使用し、スクロールには better-scroll プラグインを使用しました。

better-scrollに導入したコンポーネントで@clickイベントを使用すると、クリックイベントが失敗します。v-on:click、v-bind:click、@click.nativeはすべて機能します。ただし、@touchstartを試したところ、機能します。better-scrollの設定でclick: trueが設定されていないことがわかりました。設定後、クリックイベントは成功します。

その後、vuexを使用すると、

[vuex] 不明なミューテーションタイプ: changeCity

ストアファイルの状態に変異を記述したことに今気づき、自分があまりにも愚かだったので泣きました。 。 。

正しい書き方は次のとおりです。

vue better-scrollのカプセル化と使用

多くのモバイル プロジェクトでは、better-scroll プラグインが使用されていると思います。これにより、ページのスクロールが柔軟になり、アンカーなどの一部の機能の実装も容易になります。

注意: このプラグインは、スクロールしたいコンテンツの高さが親ボックスの高さより大きい場合にのみ機能します。

まず、npmでこのプラグインをインストールします

npm i better-scroll --save

次に、Betterコンポーネントをカプセル化して、グローバルに再利用できるようにします。

<テンプレート>
  <div class="wrapper" ref="wrapper" :style="{height:allHeight}">
   <スロット></スロット>
  </div>
</テンプレート>

<スクリプト>
'better-scroll' から BScroll をインポートします
エクスポートデフォルト{
  データ（） {
    戻る {
      すべて高さ:''
    }
  },
  小道具:{
    スクロールハンドル:{
      タイプ:関数、
      デフォルト:関数(){}
    },
    ハンドルToタッチ終了:{
      タイプ:関数、
      デフォルト:関数(){}
    }
  },
  メソッド: {
    ハンドルToScrolltop(y){
      this.scroll.scrollTo(0,y)
    }
  },
  マウント() {
    var scroll = new BScroll(this.$refs.wrapper,{
      タップ:true、
      プローブタイプ:1
    })
    this.scroll = スクロール
     scroll.on('スクロール',(pos)=>{
       this.handleToScroll(位置)
     })
     scroll.on('touchEnd',(pos)=>{
       this.handleToTouchEnd(位置)
     })

  dangqian = this.$refs.wrapper.offsetTop とします
  zongaodu = document.documentElement.clientHeight とします。
  みんなで = 宗高当前
  this.allHeight = all + "px"
  },
}
</スクリプト>
<スタイル>
</スタイル>   

allHeight の動的バインディングは、親ボックスの高さを常にページの下部からの高さにすることで、計算による実装が容易になります。

2つのメソッドが同時にカプセル化されています。1つはスクロールで、プルダウンの更新メソッドです。touchEndはプルダウンの更新後にトリガーされる関数です。他にもプルアップしてさらに読み込むなど、多くのメソッドがあります。公式サイトのドキュメントで確認できます。

次に、このコンポーネントをmain.jsにグローバルに登録します。

'./components/content/Scroller' から Scroller をインポートします。
Vue.component('スクロール',スクロール)

他のコンポーネントでの使用

たとえば、ulタグ内のコンテンツにスクロール効果を持たせたい場合は、次のように記述します。

 <スクローラー>
 <ul>
 </ul>
</スクロール>

カプセル化を使用する場合は、propsを介して通信できます

<スクロール:handleToScroll="handleToScroll" :handleToTouchEnd="handleToTouchEnd">

このように、ページにはこのスクロール効果がありますが、多くのネイティブメソッドがカバーされることに注意してください。ただし、内部プロパティを使用した対応するソリューションもあります。たとえば、ページのアンカーポイントジャンプ

カプセル化されたコンポーネントにy軸を動かすメソッドを記述しました。

  メソッド: {
     ハンドルToScrolltop(y){
       this.scroll.scrollTo(0,y)
     }
   },

どうやって使うの？

使用したいページでこのメソッドを呼び出すと

handleToScrolltop()、対応するoffsetTopを括弧内に入れる

上記は私の個人的な経験です。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。