WeChatミニプログラムのページジャンプ機能-ミニプログラム開発-php.cn

WeChatミニプログラムのページジャンプ機能

小云云

リリース： 2017-12-07 15:59:40

オリジナル

4386 人が閲覧しました

この記事は主に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

🎜🎜rrreee🎜 関連する推奨事項: 🎜 🎜🎜 WeChat ミニプログラムで画像拡大プレビュー機能を実装する方法🎜🎜🎜🎜 WeChat ミニプログラムで日付ピッカーを開発する方法🎜🎜🎜🎜経験を形にするミニプログラム開発中🎜🎜🎜🎜🎜

以上がWeChatミニプログラムのページジャンプ機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。