ユニアプリアプレットはWeChatでも同様のドロップダウン問題を抱えることになる 解決策は、app.vueページのonLaunchメソッドにスライドダウンを禁止するメソッドを追加することです。 this.$nextTick(() => { document.body.addEventListener("touchmove", this.addBodyTouchEvent, { 受動態: 偽 }); }); 問題が解決した後、uniAppのエディターコンポーネントをスライドさせることはできません 回避策 データにこれら2つの値を追加します スライド効果を手動で記述するための touchstart および touchend メソッドを追加します。 タッチスタート(e) { this.previewScrollTop = e.touches[0].pageY; }, タッチエンド(e) { 距離をe.changedTouches[0].pageY - this.previewScrollTopとします。 (Math.abs(距離) <= 10) の場合 { false を返します。 } //距離が短すぎる場合はスクロールしない let dom = this.$refs.editor.$el.getElementsByClassName("ql-editor")[0], maxHeight = Math.max(0, dom.scrollHeight - dom.clientHeight), // 最大高さ範囲 tempData = this.scrollTop + (distance >= 0 ? -60 : 60); // 必要な高さデータを計算 if (tempData >= maxHeight) { this.scrollTop = maxHeight; DOM のスクロールトップを this.scrollTop に変更します。 } それ以外の場合 (tempData <= 0) { this.scrollTop = 0; DOM のスクロールトップを this.scrollTop に変更します。 } それ以外 { this.scrollTop = tempData; DOM のスクロールトップを this.scrollTop に変更します。 } } このときにスライディング効果が現れます。しかし、滑りがスムーズではありません。 アニメーション化されたトランジション効果を書きたかったのです。しかし。このスライドは、dom.scrollTop プロパティを使用して行われます。このプロパティは CSS プロパティに属していないため、CSS 遷移アニメーションは使用できません。 そこで js メソッドを書きました。 /** * アニメーションはページ上の指定された位置まで垂直にスクロールします* @param { } dom 要素オブジェクト* @param { Number } currentY 現在の位置* @param { Number } targetY ターゲット位置*/ エクスポート関数 scrollAnimation(dom, currentY, targetY) { // 移動距離を計算します let needScrollTop = targetY - currentY; _currentY = currentY とします。 タイムアウトを設定する(() => { // 呼び出しごとのスライディングフレームの数は毎回異なります。const dist = Math.ceil(needScrollTop / 10); _currentY += 距離; dom.scrollTo(_currentY, currentY); // 移動が 10 ピクセル未満の場合は直接移動し、それ以外の場合はアニメーション効果を実現するために再帰的に呼び出します if (needScrollTop > 10 || needScrollTop < -10) { scrollAnimation(dom、_currentY、targetY); } それ以外 { dom.scrollTo(_currentY, targetY); } }, 1); } 想起 タッチエンド(e) { 距離をe.changedTouches[0].pageY - this.previewScrollTopとします。 (Math.abs(距離) <= 10) の場合 { false を返します。 } //距離が短すぎる場合はスクロールしない let dom = this.$refs.editor.$el.getElementsByClassName("ql-editor")[0], maxHeight = Math.max(0, dom.scrollHeight - dom.clientHeight), // 最大高さ範囲 tempData = this.scrollTop + (distance >= 0 ? -60 : 60); // 必要な高さデータを計算 if (tempData >= maxHeight) { this.scrollTop = maxHeight; DOM のスクロールトップを this.scrollTop に変更します。 } それ以外の場合 (tempData <= 0) { this.scrollTop = 0; DOM のスクロールトップを this.scrollTop に変更します。 } それ以外 { this.scrollTop = tempData; scrollAnimation(dom, 0, this.scrollTop); } } 注記: この質問は、もともと Transform: translateY( y ) プロパティを使用して記述することを意図しており、実際にそのように記述されました。 しかし、やってみると dom = this.$refs.editor.$el.getElementsByClassName("ql-editor")[0] とします。 ここで選択されている要素は、赤いボックスの下の要素です。オフセットを実行すると、要素全体がオフセットされます。文書は完全には表示されませんが、その下に大きな空白スペースがあります。その時はスクリーンショットを撮っていませんでした。遭遇した落とし穴を記録します。 uniAppエディターWeChatスライド問題に関するこの記事はこれで終わりです。 uniAppエディターWeChatスライドに関するその他の関連コンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。 今後とも123WORDPRESS.COMを応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: JavaScriptにおけるPromiseの使い方と注意点について(推奨)
>>: vue 要素 el-transfer にドラッグ機能を追加
1. Vimの公式ウェブサイトにアクセスして、オペレーティングシステムに適した実行ファイルをダウンロ...
1. 需要絵が左から右へ無限ループで動く2. コードモバイルデバイスに適用されているため、rem 単...
以前、プロジェクトを行う際に ECharts を使用しました。今日はそれをメモとして整理し、より多く...
目次グローバル変数 globalDataページプライベート変数データストレージ非同期ストレージ(デバ...
Ethereum 上で DApps を開発したことがある場合は、フロントエンド JavaScript...
コンテキストの定義と目的コンテキストは、コンポーネント ツリーにプロパティを明示的に渡すことなく、コ...
削除する方法はいくつかあります:リンクを直接追加するonfocus="this.blur(...
1. インストール前の準備: 1.1 JDKをインストールするopenjdkをアンインストールする...
ElementUIはテーブルリストのページング効果のチュートリアルを実装しています。参考までに。具体...
1) プロセス 2) FSImageと編集NodeNode は HDFS の頭脳です。ファイルシステ...
目次1. 双方向データバインディングとは1. データの双方向バインディングを実装する必要があるのはな...
1. vue-cli がプロジェクト パッケージを作成した後にページが空白になる問題の解決方法コマン...
MySQL のインストールは比較的簡単なので、通常は次のステップに直接進み、注意が必要な点に集中する...
具体的な方法: 1. コマンドプロンプトを開く2. mysql -u root -pコマンドを入力し...
MySQL 一時テーブルは、一時的なデータを保存する必要がある場合に非常に便利です。一時テーブルは現...