ユニアプリアプレットは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 にドラッグ機能を追加
トリガー:トリガーの使用シナリオと対応するバージョン:トリガーは次の MySQL バージョンで使用で...
<iframe src=”ページのURL” width=”100″ height=”30″ f...
序文:多くのビジネス テーブルでは、歴史的またはパフォーマンス上の理由により、最初のパラダイムに違反...
ボリュームラベル、プロパティ名、説明002 <! - - ... - -> コメント00...
序文この記事では、CSS3アニメーションを使用して、円が小さいものから大きく拡大し、外側に広がる効果...
前回、非常に熱心なファンから、月を呼吸する光の効果にできるかどうか尋ねられました。月の大きさの写真が...
昨日はデータベースへの接続に問題はありませんでしたが、今日はデータベースへの接続時にこのエラーが報告...
序文システムの高可用性を満たすためには、通常、クラスターを構築する必要があります。ホストがクラッシュ...
背景Docker の人気は、コンテナの共有と移植が容易であることと密接に関係しています。ユーザーは、...
目次G2チャートについて使用テンプレートで使用される完全なコード (棒グラフ)世界地図を追加するG2...
問題の説明ボタンのスタイルはアイコン + テキストです。フレックス レイアウトを使用して垂直方向に中...
目次クラスコンポーネント機能コンポーネントsetStateの落とし穴React では多くの場所でデー...
黄金律常に同じコーディング標準セットに従ってください。同じプロジェクトに何人の人が関わっているかに関...
エンジン導入InnodbエンジンInnodb エンジンは、データベース ACID トランザクションを...
Cocos Creator バージョン: 2.3.4デモのダウンロード: https://files...