uniAppエディタWeChatスライド問題について

uniAppエディタWeChatスライド問題について

ユニアプリアプレットは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を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • uniapp アプレットでウォーターフォール フロー レイアウトを実装するためのアイデアとコード
  • Uniapp WeChatアプレット: キー障害の解決策
  • uniapp H5 https クロスドメイン リクエストの実装
  • uniappのグローバル変数実装の詳細な説明
  • Uniappは、スライドページコントロール要素の表示と非表示の効果を実現する小さなプログラムを開発しました。
  • Uniapp WeChatアプレットは1ページに複数のカウントダウンを実現します
  • Uniapp 電子商取引アプレットが注文の 30 分カウントダウンを実装
  • Uniappはスライド可能なタブを実装
  • uniappがインターフェースドメイン名を動的に取得する方法を分析する

<<:  JavaScriptにおけるPromiseの使い方と注意点について(推奨)

>>:  vue 要素 el-transfer にドラッグ機能を追加

推薦する

Power Shell に vim 実装コード例を追加する方法

1. Vimの公式ウェブサイトにアクセスして、オペレーティングシステムに適した実行ファイルをダウンロ...

CSSアニメーションを使用して背景のシームレスな無限ループを実装する例

1. 需要絵が左から右へ無限ループで動く2. コードモバイルデバイスに適用されているため、rem 単...

JavaScript ECharts の使用方法の説明

以前、プロジェクトを行う際に ECharts を使用しました。今日はそれをメモとして整理し、より多く...

WeChatアプレットにおけるデータ保存実装方法

目次グローバル変数 globalDataページプライベート変数データストレージ非同期ストレージ(デバ...

ethers.js を使用して Solidity スマート コントラクトをデプロイする方法

Ethereum 上で DApps を開発したことがある場合は、フロントエンド JavaScript...

Reactにおけるコンテキスト適用シナリオの分析

コンテキストの定義と目的コンテキストは、コンポーネント ツリーにプロパティを明示的に渡すことなく、コ...

リンクをクリックしたときに表示される点線のボックスを削除するいくつかの方法

削除する方法はいくつかあります:リンクを直接追加するonfocus="this.blur(...

zabbix 4.04 の詳細なインストール チュートリアル (CentOS 7.6 ベース)

1. インストール前の準備: 1.1 JDKをインストールするopenjdkをアンインストールする...

VueコンポーネントライブラリElementUIはテーブルリストのページング効果を実現します

ElementUIはテーブルリストのページング効果のチュートリアルを実装しています。参考までに。具体...

Hadoop におけるネームノードとセカンダリネームノードの動作メカニズムの説明

1) プロセス 2) FSImageと編集NodeNode は HDFS の頭脳です。ファイルシステ...

Vueフォームバインディングとコンポーネントの詳細な説明

目次1. 双方向データバインディングとは1. データの双方向バインディングを実装する必要があるのはな...

Vue パッケージ化後の空白ページの解決策

1. vue-cli がプロジェクト パッケージを作成した後にページが空白になる問題の解決方法コマン...

Win7 での mysql5.5 インストール グラフィック チュートリアル

MySQL のインストールは比較的簡単なので、通常は次のステップに直接進み、注意が必要な点に集中する...

MySQLでユーザー認証情報を表示する具体的な方法

具体的な方法: 1. コマンドプロンプトを開く2. mysql -u root -pコマンドを入力し...

MySQL 一時テーブルの簡単な使用法

MySQL 一時テーブルは、一時的なデータを保存する必要がある場合に非常に便利です。一時テーブルは現...