ホームページ > WeChat アプレット > ミニプログラム開発 > ミニプログラムでリストオブジェクト情報を動的に取得するコード例

ミニプログラムでリストオブジェクト情報を動的に取得するコード例

不言
リリース: 2018-10-29 16:49:04
転載
4393 人が閲覧しました

この記事の内容は、小さなプログラムでリスト オブジェクトの情報を動的に取得するためのコード例です。必要な方は参考にしていただければ幸いです。

まずはレンダリング :

ミニプログラムでリストオブジェクト情報を動的に取得するコード例

ミニプログラムでリストオブジェクト情報を動的に取得するコード例

##このコンテンツでは主に以下の方法を紹介します。リスト内のオブジェクトの詳細を動的に取得するには: 1. 最初にリストのコンテンツを表示します:
リストのコンテンツは、wx:for セットアップの一連のパラメーターであるデータ バインディングとチャット テーブル レンダリングによって実装されます。 。

<block>
  <view>
    <!--界面跳转 -->
    <image></image>
    <text>{{item.pf_name}}</text>
    <!-- <text>{{item.pf_id}}</text> -->
  </view>
</block>
ログイン後にコピー
ジャンプ関数メソッド

goDetail、ジャンプ先のオブジェクトIDはitem.pf_id、クリックされたオブジェクトはindexです。 もちろん、これをナビゲーター ジャンプとして設定することもできます。違いは、ナビゲーターがリンクにパラメーターの組み合わせを追加し、それをページに渡すことであり、ハードコーディングされたコンテンツに適しています。
2. 動的取得を考慮すると、バックグラウンド データを要求するのは自然です:

goDetail: function(ev) {
   var that = this;
   var e = ev.currentTarget.dataset.id;
   console.log("++++++",ev,that)
   wx.setStorageSync("people_id", e), wx.navigateTo({
     url: "../detail/detail"
   })
 },
ログイン後にコピー
ここでは、リスト オブジェクト

id がキャッシュ データとして保存され、次のページに送信されます。取得。必ず console.log(" ",ev,that) 経由で出力してください。データが取得または保存されたかどうかをテストするため。 オブジェクトの詳細ページは次のように表示できます。

require("../../utils/util.js"), getApp();
Page({
data: {
  name: "",
  sex: "",
  birthday: "",
  post: "",
  address: "",
  addtime: "",
  phone: "",
  identityCard: "",
  schools: "",
  pspecialty: "",
  diploma: "",
  workingState: "",
  entrytime: "",
  worktime: ""
},
onLoad: function(e) {
  var t = this,
    a = wx.getStorageSync("session_uid"),
    i = wx.getStorageSync("people_id");
  console.log("--------",i,e,a)
  wx.request({
    url: "https://xxxxxxxxxxxxx.com/wx/userinfo/",
    data: {
      pf_id: i,
      Cookie: a
    },
    method: "POST",
    header: {
      "Content-Type": "application/x-www-form-urlencoded"
    },
    success: function(e) {
      console.log("员工数据", e.data.data);
      var a = e.data.data;
      t.setData({
        name: a.pf_name,
        sex: a.pf_sex,
        birthday: a.pf_birthday,
        post: a.m_id_post,
        address: a.pf_address,
        addtime: a.pf_addtime,
        phone: a.pf_phone,
        identityCard: a.pf_identityCard,
        schools: a.pf_schools,
        diploma: a.m_id_diploma,
        pspecialty: a.pf_specialty,
        workingState: a.pf_workingState.state_name,
        entrytime: a.pf_entrytime,
        worktime: a.worktime
      })
    },
    fail: function(e) {}
  })
},
onReady: function() {},
onShareAppMessage: function() {}
});
ログイン後にコピー
クリック時に渡されたパラメータ ID を介してリクエスト情報を送信し、オブジェクトに関するすべての情報をサーバーから取得して保存し、フロントエンド ページを開き、対応するページを表示します。対応するフィールド パラメータは、バックグラウンド担当者によって設定されたフィールドに従って渡されます。

最後に、オブジェクトの動的な情報を取得できます。

以上がミニプログラムでリストオブジェクト情報を動的に取得するコード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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