미니 프로그램에서 목록 개체 정보를 동적으로 가져오는 코드 예제

不言
풀어 주다: 2018-10-29 16:49:04
앞으로
4363명이 탐색했습니다.

이 글은 미니 프로그램에서 목록 객체 정보를 동적으로 얻기 위한 코드 예제를 제공합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

먼저 렌더링 표시:

미니 프로그램에서 목록 개체 정보를 동적으로 가져오는 코드 예제

미니 프로그램에서 목록 개체 정보를 동적으로 가져오는 코드 예제

이 콘텐츠는 주로 목록에서 개체 세부정보를 동적으로 얻는 방법을 소개합니다.
1 목록 콘텐츠를 먼저 표시합니다.
목록 콘텐츠는 아직 진행 중입니다. 데이터 바인딩 및 채팅 테이블 렌더링이 구현되고 wx:for의 일련의 매개변수 설정이 구현됩니다.

<block>
  <view>
    <!--界面跳转 -->
    <image></image>
    <text>{{item.pf_name}}</text>
    <!-- <text>{{item.pf_id}}</text> -->
  </view>
</block>
로그인 후 복사

Jump 함수 방식 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:csdn.net
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿