위 챗 애플 릿 개발(1):서버 데이터 목록 렌 더 링 작업 예제 가 져 오기
실제 프로젝트 개발 에 서 는 프론트 페이지 의 데 이 터 를 백 엔 드 서버 가 전달 해 야 할 때 가 많다.프론트 데스크 는 다음 페이지 와 같은 값 을 반복 적 으로 깔 아야 합 니 다.
요청 배경 데이터:
wx.request({
url: getApp().globalData.httpUrl + '/sys/group/selectGroupProList', //
data: {
//
pageNum: that.data.page,
pageSize: that.data.pageSize
},
method: "post",
success(res) {
console.log(res.data);
}
})
백 엔 드 반환 데이터 형식:다음은 프론트 페이지 의 값 입 니 다.일반 사이트 의 페이지 에 값 을 깔 때 저 는 JS 문자열 연결 기술 을 사용 하여 데 이 터 를 페이지 에 맞 추 겠 습 니 다.바깥 빵 은 1 층
for
순환 하면 이런 목록 페이지 를 순환 적 으로 깔 수 있 습 니 다.현재 위 챗 애플 릿 에서 우 리 는 wxml 에 js 코드 를 일부 쓸 수 있 습 니 다.for 순환 을 wxml 에 쓸 수 있 습 니 다.
<view bindtap="jumpPages"
wx:for="{{contentlist}}"
wx:key="{{index}}"
wx:for-index="index"
wx:for-item="item"
>
<van-card
num=" {{item.prjcount}} "
price=" "
title="{{item.project_name}}"
desc="{{item.name}}"
centered=true
currency=""
custom-class="custom-g"
thumb-class="thumb"
title-class="title-g"
desc-class="desc-g"
>
</van-card>
</view>
설명:코드 의<van-card>
내 가 인용 한 구성 요소 라 이브 러 리 입 니 다.고려 할 필요 가 없습니다.본 논문 에서 말 한 것 이 여러분 의 위 챗 애플 릿 디자인 에 도움 이 되 기 를 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
OpenSSL 생 성 ssl 인증서텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.