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

著者:Zはハンサムから打た認定アドレス
移転先: WeChat Small Program Alliance

あまり言わない場合は、コアデータと構造を見てみましょう:

まず、データ:

市のjson配列、手紙の配列

(都市のjson配列の最初の文字は手動で配置されます。自動的に追加するためにforループを使用してcity_enの最初の文字を追加することもできますが、パフォーマンスを得るための柔軟性はありません)

第二に、レイアウト

左側には右側にあるscollviewがあります。レイアウトがうまくいかない場合は、まず「フレックスレイアウト」を理解してください。

第三に、サイドバーのレイアウト

サイドバーアイテムIDを現在の文字にする

第4に、サイドバーの距離をトップ50pxに設定し、サイドバーのアイテムを固定の20pxに設定します。これは必須です

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

.sideBar-item {
  height: 20px;
}

第5に、イベントbindtouchmoveをサイドバーに追加する

このイベントは、現在の指のタッチの位置を得ることができます(主に画面の上部からページYを取得します)。

VAR pageY = touchmoveイベントeでpageYを取得する

変数letterIndex =(pageY – サイドバーは上から50pxです)/サイドバーの項目は20pxです

Var文字= charArray [文字インデックス];

実際のコード:

   let letterIndex = (e.changedTouches["0"].pageY- 50) / 20;
   let letter = this.data.letterArray[letterIndex - 1];

ここでは、手紙を手にしたことがあります。

6、スクロールビュー属性に文字をスクロールビューに入れる:スクロールツービューでは、その値をIDに設定できます

scrollviewのようなABCDのインデックスのIDは、実際にはABCDそのものです。そして、4番目の段落で得られた文字はthis.setData({toview:letter})に渡されます。

この時点で、サイドバーをタッチして、リストをタッチして変更してください。

7つは、ポストスクリプトプロセス:

最近、WeChatアプレットは非常に暑いです。私はまた、天気ソフトウェアtryrになりました。私は都市リストのサイドバーを作ったとき、私は困惑しました。

まずスクロールビューのスクロールビュープロパティを理解し、このプロパティにID値を割り当てます。次に、ID値に対応するコンポーネントがスクロールビューの一番上に配置されます。

アイテム "赣州"のIDが甘粛である場合、スクロール・ツー・ビューの値をganzhouに設定すると、スクロール・ビューが開くとすぐに上部にスクロール・ビューが表示されます。

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

1つ1つ試した後、私はタッチモーブが自分のために最善であることを発見しました。

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

しかし、それは実際に私が思うものではなく、彼が戻ってくるものは、私の指が最初にその位置に触れた部分です。

最後に、サイドバーとサイドバーの項目の位置が固定されており、文字の位置が計算によって求められていることがわかりました。

元のリンク