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

不言
リリース: 2018-06-26 17:31:18
オリジナル
3795 人が閲覧しました

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

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

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

1. エフェクト画像

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

2. ページ間をジャンプ

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

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

wx.navigateTo({
 url: 'test?id=1'
})
ログイン後にコピー

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

wx.redirectTo({
 url: 'test?id=1'
})
ログイン後にコピー

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

wx.switchTab({
 url: '/index'
})
ログイン後にコピー

注: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


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

関連する推奨事項:

WeChatアプレットでの入力入力と動的設定ボタンの実装

🎜🎜🎜WeChatアプレットのページ間で通信する方法🎜🎜🎜🎜🎜WeChatアプレットでのグローバルデータと関数の再利用の定義とテンプレートの紹介🎜🎜🎜🎜🎜🎜🎜🎜🎜

以上がリスト内の項目から次のページにジャンプする WeChat アプレットのページ ジャンプ機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート