2 行のコードで WeChat アプレットの連絡先サイドバーを実装します。

高洛峰
リリース: 2017-02-20 15:33:04
オリジナル
2080 人が閲覧しました

1. データ:

city の json 配列、letter の配列

(最初の文字を city の json 配列に手動で配置しました。for ループを通じて city_en の最初の文字を取得して自動的に追加することもできます。パフォーマンスを向上させるために、柔軟性を放棄しました)

2 行のコードで WeChat アプレットの連絡先サイドバーを実装します。

2 行のコードで WeChat アプレットの連絡先サイドバーを実装します。

2. レイアウト: 左側にスコールビュー、右側にサイドバー このレイアウトが良くない場合は、まず「フレックス レイアウト」について学習してください

2 行のコードで WeChat アプレットの連絡先サイドバーを実装します。

3. サイドバーのレイアウト、サイドバー項目の ID を現在の文字にします

2 行のコードで WeChat アプレットの連絡先サイドバーを実装します。

4. サイドバーの上部からの距離を 50 ピクセルに設定し、サイドバーの項目を固定の 20 ピクセルに設定します

5.サイドバーイベントbindtouchmoveを追加します。このイベントは現在の指のタッチ位置を取得できます(主に画面上部からpageYを取得するため)。次のようなアイデアです

var pageY = get pageY in touchmoveイベントe

var LetterIndex = (pageY - サイドバーの先頭からの距離 50px)/サイドバー項目の高さ 20px

var Letter = charArray[letterIndex];

実際のコード:

.sideBar {
  width: 5%;
  margin-top: 50px;
}

.sideBar-item {
  height: 20px;
}
ログイン後にコピー

これで、指が触れた文字が取得できました

6.


scroll-to-viewの属性であるscroll-viewを通じて、その値をIDに設定できます。

scrollviewのABCDとその他のインデックスIDは実際にはABCD自体であり、文字を渡しますthis.setData({toview:letter});

この時点で、サイドバーをタッチするとリストが変化するのがわかります。

7. 追記プロセス:


最近WeChatアプレットがとても人気があります、私も天気ソフトを作ろうとしましたが、都市リストのサイドバーを作るときにつまづきました

まずはscrollviewを理解してください スクロール-to-view 属性で、この属性に ID 値を割り当てると、その ID 値に対応するコンポーネントがスクロールビューの上部に配置されます。 例:

項目「Ganzhou」の ID が ganzhou の場合、スクロールビューを配置します -to-view の値を ganzhou に設定すると、スクロールビューが開くとすぐに Ganzhou が上部に表示されます。

次に、WeChat アプレットの「イベント」を調べます。 WeChat アプレットのイベントには次のようなものがあります

2 行のコードで WeChat アプレットの連絡先サイドバーを実装します。

一つずつ試してみたところ、私にとっては touchmove が最も適していることがわかりました。

touchmove イベントはタッチ位置のコンポーネント情報を返すので、コンポーネントに基づいて ID 値を取得し、その ID 値を scoll-to-view に割り当てることができます

しかし、実際にはそうではありませんと思ったら戻ってきてしまう それは私の指が最初に触れた部品です。

最後に、サイドバーとサイドバー項目の位置を固定し、文字の位置を計算で求めることを考えました。

WeChat アプレットの連絡先サイドバー関連記事を実装するためのさらに 2 行のコードについては、PHP 中国語 Web サイトに注目してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!