WeChat 애플릿 개발 목록 풀업 로드 풀다운 새로 고침 샘플 코드

이 글은 WeChat 애플릿 목록의 풀업, 로드, 풀다운 새로 고침 예시를 주로 소개하며, 실용적 가치가 뛰어나 도움이 필요한 친구들이 참고할 수 있습니다.

1. 목록(이 부분의 내용은 공식 문서에서 따옴)

이 기능에 대해 WeChat 애플릿에서는 목록 보기와 유사한 컨트롤을 제공하지 않습니다. Android이므로 wx:for 제어 속성을 사용하여 배열을 바인딩하고 목록의 효과를 얻으려면 배열의 각 항목 데이터로 구성 요소를 반복적으로 렌더링해야 합니다.

<view wx:for="{{array}}">
 {{index}}: {{item.message}}
</view>

Page({
 data: {
 array: [{
  message: 'foo',
 }, {
  message: 'bar'
 }]
 }
})

기본 배열의 현재 항목의 첨자 변수 이름은 기본적으로 index로 설정되고, 현재 항목의 변수 이름은 배열의 기본값은 item입니다. 물론 wx:for-item 및 wx:for-index를 통해 지정할 수도 있습니다.

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
 {{idx}}: {{itemName.message}}
</view>

wx: for는 중첩될 수도 있습니다. 아래는 구구단입니다.

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
 <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
 <view wx:if="{{i <= j}}">
  {{i}} * {{j}} = {{i * j}}
 </view>
 </view>
</view>

block wx: for

블록 wx:if와 유사하게, wx:for는 2b5957c2850173214f4ea7f1261e9a0f 태그에 사용되어 여러 노드를 포함하는 구조 블록을 렌더링할 수도 있습니다. 예:

<block wx:for="{{[1, 2, 3]}}">
 <view> {{index}}: </view>
 <view> {{item}} </view>
</block>

wx:key

목록의 항목 위치가 동적으로 변경되거나 새 항목이 목록에 추가되는 경우, 항목은 고유한 특성과 상태(예: 0f0306f9b187f2e363126bc29c8b1420의 입력 콘텐츠, 698d939a2c9041f2302734cfeb04788e의 선택된 상태)를 유지하고 wx:key를 사용하여 지정해야 합니다. 목록에 있는 항목의 고유 식별자입니다.

wx:key의 값은 두 가지 형태로 제공됩니다.

1. for 루프 배열에서 항목의 특정 속성을 나타내는 문자열입니다. 목록에 있는 유일한 문자열 또는 숫자이며 동적으로 변경할 수 없습니다.

2. 예약된 키워드 *this는 for 루프의 항목 자체를 나타냅니다. 이 표현을 사용하려면 항목 자체가 다음과 같은 고유한 문자열 또는 숫자여야 합니다.
데이터가 실행될 때 렌더링을 트리거합니다. 변경 사항 레이어가 다시 렌더링되면 키가 있는 구성 요소가 수정되고 프레임워크는 구성 요소가 자체 상태를 유지하고 목록 렌더링의 효율성을 향상시키기 위해 다시 생성되지 않고 재정렬되도록 보장합니다.

wx:key가 제공되지 않으면 경고가 보고됩니다. 목록이 정적임을 명확히 알고 있거나 순서에 주의할 필요가 없으면 무시하도록 선택할 수 있습니다.

샘플 코드:

<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>

<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront"> Add to the front </button>

Page({
 data: {
 objectArray: [
  {id: 5, unique: 'unique_5'},
  {id: 4, unique: 'unique_4'},
  {id: 3, unique: 'unique_3'},
  {id: 2, unique: 'unique_2'},
  {id: 1, unique: 'unique_1'},
  {id: 0, unique: 'unique_0'},
 ],
 numberArray: [1, 2, 3, 4]
 },
 switch: function(e) {
 const length = this.data.objectArray.length
 for (let i = 0; i < length; ++i) {
  const x = Math.floor(Math.random() * length)
  const y = Math.floor(Math.random() * length)
  const temp = this.data.objectArray[x]
  this.data.objectArray[x] = this.data.objectArray[y]
  this.data.objectArray[y] = temp
 }
 this.setData({
  objectArray: this.data.objectArray
 })
 },
 addToFront: function(e) {
 const length = this.data.objectArray.length
 this.data.objectArray = [{id: length, unique: &#39;unique_&#39; + length}].concat(this.data.objectArray)
 this.setData({
  objectArray: this.data.objectArray
 })
 },
 addNumberToFront: function(e){
 this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)
 this.setData({
  numberArray: this.data.numberArray
 })
 }
})

2. 아래로 당겨 새로고침

미니 프로그램 페이지는 드롭다운 기능을 통합하고 인터페이스를 제공합니다. 이벤트 콜백을 가져오려면 몇 가지 구성만 필요합니다.

1. .json 파일로 구성해야 합니다. (.json 파일의 형식과 app.json과 특정 페이지의 .json 파일의 차이점은 앞에서 언급한 바 있습니다. 궁금한 사항이 있으면 계속 진행하세요.) app.json 파일에 구성한 경우, 그런 다음 전체 프로그램을 당겨서 새로 고칠 수 있습니다. 특정 페이지의 .json 파일에 작성되어 있는 경우 해당 페이지이므로 풀다운하여 새로고침할 수 있습니다.

특정 페이지의 .json 파일:

{
 "enablePullDownRefresh": true
}

app.json 파일:

"window": {
 "enablePullDownRefresh": true
 }

2. js 파일에 콜백 함수 추가

 // 下拉刷新回调接口
 onPullDownRefresh: function () {
  // do somthing
 },

3. 데이터 추가

일반적인 풀다운 새로 고침 작업은 쿼리를 재설정하는 것입니다. 조건 페이지에 최신 데이터 페이지가 표시되도록 합니다. 다음은 작성자의 데모에 포함된 풀다운 새로 고침 콜백 인터페이스의 코드이며, 일반적인 작업 과정이기도 합니다.

 // 下拉刷新回调接口
 onPullDownRefresh: function () {
  // 我们用total和count来控制分页，total代表已请求数据的总数，count代表每次请求的个数。
  // 刷新时需把total重置为0，代表重新从第一条请求。
  total = 0; 
  // this.data.dataArray 是页面中绑定的数据源
  this.data.dataArray = [];
  // 网络请求，重新请求一遍数据
  this.periphery();
  // 小程序提供的api，通知页面停止下拉刷新效果
  wx.stopPullDownRefresh;
 },

3. 풀업 로딩

풀다운 새로고침과 마찬가지로 미니 프로그램에서도 풀업 콜백을 제공합니다. 업 인터페이스. 공식 문서에는 자세한 소개가 없습니다. 테스트 후 풀업 콜백 인터페이스에는 추가 구성이 필요하지 않은 것으로 나타났습니다(풀다운 시 .json 파일에서 "enablePullDownRefresh": true를 구성해야 함). 페이지가 하단으로 슬라이드되면 바로 활성화됩니다. 콜백을 받을 수 있습니다.

1. js 파일에 콜백 기능 추가

 // 上拉加载回调接口
 onReachBottom: function () {
  // 我们用total和count来控制分页，total代表已请求数据的总数，count代表每次请求的个数。
  // 上拉时需把total在原来的基础上加上count，代表从count条后的数据开始请求。
  total += count;
  // 网络请求
  this.periphery();
 },

위 내용은 WeChat 애플릿 개발 목록 풀업 로드 풀다운 새로 고침 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!