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を応援していただければ幸いです。

以下もご興味があるかもしれません: