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 にドラッグ機能を追加

推薦する

MySQL トリガーの使用シナリオとメソッドの例

トリガー:トリガーの使用シナリオと対応するバージョン:トリガーは次の MySQL バージョンで使用で...

枠線や境界線のない iframe を使用するための完全ガイド (実践経験のまとめ)

<iframe src=”ページのURL” width=”100″ height=”30″ f...

MySQL の列から行への変換のヒント (共有)

序文:多くのビジネス テーブルでは、歴史的またはパフォーマンス上の理由により、最初のパラダイムに違反...

HTML 文法百科事典_HTML 言語文法百科事典 (必読)

ボリュームラベル、プロパティ名、説明002 <! - - ... - -> コメント00...

CSS3アニメーションを使用して、小さい円から大きい円に拡大し、外側に広がる効果を実現する例

序文この記事では、CSS3アニメーションを使用して、円が小さいものから大きく拡大し、外側に広がる効果...

Pure CSS と Flutter はそれぞれブリージング ライト効果を実現します (サンプル コード)

前回、非常に熱心なファンから、月を呼吸する光の効果にできるかどうか尋ねられました。月の大きさの写真が...

エラー 1045 (28000): ユーザー ''root''@''localhost'' のアクセスが拒否されました (パスワード使用: YES) 実用的な解決策

昨日はデータベースへの接続に問題はありませんでしたが、今日はデータベースへの接続時にこのエラーが報告...

nginx と keepalived を組み合わせて高可用性を実現するための手順を完了する

序文システムの高可用性を満たすためには、通常、クラスターを構築する必要があります。ホストがクラッシュ...

Dockerコンテナのインポ​​ートとエクスポートに関するチュートリアル

背景Docker の人気は、コンテナの共有と移植が容易であることと密接に関係しています。ユーザーは、...

VUEはG2チャートを使用した実装を導入します

目次G2チャートについて使用テンプレートで使用される完全なコード (棒グラフ)世界地図を追加するG2...

フレックスインサイドボタンの垂直方向の中央揃えが中央揃えにならない問題の解決方法

問題の説明ボタンのスタイルはアイコン + テキストです。フレックス レイアウトを使用して垂直方向に中...

Reactの3つの主要属性における状態の使用の詳細な説明

目次クラスコンポーネント機能コンポーネントsetStateの落とし穴React では多くの場所でデー...

柔軟で安定した高品質の HTML および CSS コード標準を作成するためのガイド

黄金律常に同じコーディング標準セットに従ってください。同じプロジェクトに何人の人が関わっているかに関...

MySQL学習エンジンの詳細な説明、説明、権限

エンジン導入InnodbエンジンInnodb エンジンは、データベース ACID トランザクションを...

CocosCreator でカメラトラッキングに cc.follow を使用する方法

Cocos Creator バージョン: 2.3.4デモのダウンロード: https://files...