リスト内の項目から次のページにジャンプする WeChat アプレットのページジャンプ機能を実装する方法-ミニプログラム開発-php.cn

リスト内の項目から次のページにジャンプする WeChat アプレットのページジャンプ機能を実装する方法

不言

リリース： 2018-06-26 17:31:18

オリジナル

3803 人が閲覧しました

この記事では、主にWeChatミニプログラムのページジャンプ機能とリスト内の項目項目から次のページにジャンプする方法を紹介し、具体的な例に基づいてWeChatミニプログラムのページジャンプとリスト項目のジャンプページを要約して分析します。必要な友達は、関連する操作スキルを参照してください。

この記事では、WeChat アプレットのページジャンプ機能の例、リスト内の項目から次のページにジャンプする方法について説明します。参考のためにみんなと共有してください:

多くのプロジェクトにはメッセージ記録ページ、つまりリストページがあり、リスト内の項目をクリックすると、メッセージの詳細ページが表示されます。前の記事の続きと共有を続ける方法については、リスト内の項目から次のページに移動します。

1. エフェクト画像

左側の一覧ページから右側の詳細ページに移動

2. ページ間をジャンプ

まず最初に見るのはページジャンプ転送、WeChat アプレットには 3 つのジャンプ方法があります:

1. 現在のページを保持し、アプリケーション内のページにジャンプします。元のページに戻るには、wx.navigateBack を使用します。 wx.navigateBack可以返回到原页面。

wx.navigateTo({
 url: &#39;test?id=1&#39;
})

ログイン後にコピー

2、关闭当前页面，跳转到应用内的某个页面。

wx.redirectTo({
 url: &#39;test?id=1&#39;
})

ログイン後にコピー

3、跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

wx.switchTab({
 url: &#39;/index&#39;
})

ログイン後にコピー

注：wx.navigateBack(OBJECT)关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages())

<view wx:for="{{array}}">
 {{index}}: {{item.message}}
</view>

ログイン後にコピー

2. 現在のページを閉じて、アプリ内のページに移動します。

<view wx:for="{{array}}" wx:key="{{item.viewid}}">
 {{index}}: {{item.message}}
</view>

ログイン後にコピー

3. tabBar ページにジャンプし、他のすべての非 tabBar ページを閉じます

url="../detail/detail?index={{item.viewid}}"

ログイン後にコピー

注:

wx.navigateBack(OBJECT)現在のページを閉じます, 前のページまたは複数のレベルのページに戻ります。 getCurrentPages()) を通じて現在のページスタックを取得し、返される必要があるレイヤーの数を決定できます。

3. リスト項目から次のページにジャンプします

最初のステップは、リストをレンダリングし、コンポーネントの wx:for コントロール属性を使用して、各項目のデータを使用する配列をバインドすることです。コンポーネントを繰り返しレンダリングします。デフォルトでは、配列内の現在の項目の添字変数名はデフォルトで Index になり、配列内の現在の項目の変数名はデフォルトで item


  
    {{item.name}}

ログイン後にコピー

2 番目のステップは、wx:key を使用してバインドすることです。リスト内の項目の識別子

Page({
 data: {
   words: [{message: &#39;微信小程序&#39;,viewid:&#39;1&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;2&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;3&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;4&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;5&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;6&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;7&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;8&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;9&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;}]
 }
 ...
})

ログイン後にコピー

3 番目のステップは、各項目に対応するリンクに対応するパラメータを渡すことです。レイアウトページのナビゲータナビゲーションコンポーネントを使用し、URL を指定して、対応するパラメータを渡します。各項目に対応するリンクについては、URL に従ってください。キーの値は & で接続されています。例:

デモのソースコード

rrreee

上記は記事の内容全体です。皆様の学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。