미니 프로그램 개발의 기초: 데이터 바인딩(8)-미니 프로그램 개발-php.cn

미니 프로그램 개발의 기초: 데이터 바인딩(8)

Y2J

풀어 주다： 2017-04-25 09:40:32

원래의

1653명이 탐색했습니다.

튜토리얼은 WeChat Mini 프로그램 개발 튜토리얼(기본) 7-데이터 바인딩에서 계속됩니다. 데이터 세트를 표시해야 하는 경우 wx:for

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

//.js
age({
  data: {
    array: [{
      message: &#39;foo&#39;,
    }, {
      message: &#39;bar&#39;
    }]
  }
})

로그인 후 복사

를 사용할 수 있습니다. 여기서 index는 현재 데이터입니다. index. 기본 변수 이름, item은 현재 데이터 항목의 기본 변수 이름입니다.
wx:for-item 및 wx:for-index을 사용하여 별칭을 지정할 수도 있습니다.

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

로그인 후 복사

를 중첩할 수도 있습니다. 예를 들어 다음은

<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:if 또한 태그에서 wx:for를 사용하여 여러 노드가 포함된 구조 블록을 렌더링할 수 있습니다.

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

로그인 후 복사

wx:key

이유를 알아보세요. >가 필요합니다. 먼저 예를 살펴보겠습니다. wx:key

//.wxml
<checkbox wx:for="{{objectArray}}" value="{{item.name}}" style="display: block;"> {{item.name}} </checkbox>
<button bindtap="addToFront">在上方添加一个新的check组件</button>

//.js
Page({
  data: {
    objectArray: [
      {id: 1, name: &#39;我没有被选中&#39;},
      {id: 2, name: &#39;我没有被选中&#39;},
    ],
  },

  addToFront: function(e) {
    const length = this.data.objectArray.length
    this.data.objectArray = [{id: length, name: &#39;我没有被选中&#39;}].concat(this.data.objectArray)
    this.setData({
      objectArray: this.data.objectArray
    })
  },
})

로그인 후 복사

위 코드는 두 개의

checkbox 구성 요소와 버튼을 클릭하면 새로운 구성 요소가 추가됩니다. 상단에. checkbox코드를 컴파일하면 다음 인터페이스가 표시됩니다.

미니 프로그램 개발의 기초: 데이터 바인딩(8)

여기에 그림 설명을 쓰세요

버튼을 클릭하면 인터페이스가 나타납니다. 다음과 같습니다:

미니 프로그램 개발의 기초: 데이터 바인딩(8)

여기에 그림 설명을 작성하세요

좋아, 문제를 더 잘 설명하려면 여기에 다음을 추가하세요. 체크박스 선택 이벤트 처리. 체크박스가 선택되었을 때 텍스트를 "I was selected"로 변경하고 관련 코드는 다음과 같습니다.

//wxml
<checkbox-group bindchange="checkboxChange">
  <checkbox wx:for="{{objectArray}}" value="{{item.id}}" style="display: block;" > {{item.name}} 
  </checkbox>
</checkbox-group>

<button bindtap="addToFront">在上方添加一个新的check组件</button>

//js
Page({
  data: {
    objectArray: [
      {id: 1, name: &#39;我没有被选中&#39;},
      {id: 2, name: &#39;我没有被选中&#39;},
    ],
  },

  addToFront: function(e) {
    const length = this.data.objectArray.length
    this.data.objectArray = [{id: length + 1, name: &#39;我没有被选中&#39;}].concat(this.data.objectArray)
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  checkboxChange: function(e){
    console.log(&#39;checkboxChange&#39;)
    const length = this.data.objectArray.length
    let checkBoxArray = this.data.objectArray
    for (let i = 0; i < length; i++) {
       let ischecked = false
       for (let j = 0; j < e.detail.value.length; j++){
          if (checkBoxArray[i].id == e.detail.value[j]){
              checkBoxArray[i].name = &#39;我被选中了&#39;
              ischecked = true
          }
       }
       if (!ischecked){
         checkBoxArray[i].name = &#39;我没有被选中&#39;
       }
    }
    this.setData({
      objectArray: this.data.objectArray
    })
  }
})

로그인 후 복사

첫 번째 체크박스를 선택했을 때의 인터페이스는 다음과 같습니다

미니 프로그램 개발의 기초: 데이터 바인딩(8)

여기에 사진 설명을 쓰세요

이때 컴포넌트 추가 버튼을 클릭하면 어떻게 될까요? 팔로우

미니 프로그램 개발의 기초: 데이터 바인딩(8)

여기에 사진 쓰기 설명

그러나 실제 효과는 아래 사진과 같습니다

미니 프로그램 개발의 기초: 데이터 바인딩(8)

여기에 사진 설명을 쓰세요

렌더링 엔진을 볼 수 있고 선택한 효과가 데이터에 바인딩되지 않아 예상치 못한 결과가 발생합니다. 원하는 효과를 얻으려면

wx:key

<checkbox-group bindchange="checkboxChange">
  <checkbox wx:for="{{objectArray}}" wx:key = "id" value="{{item.id}}" style="display: block;" > {{item.name}} 
  </checkbox>
</checkbox-group>

<button bindtap="addToFront">在上方添加一个新的check组件</button>

로그인 후 복사

를 사용하여 위 코드와 같이 .wxml 파일을 수정해야 원하는 효과를 얻을 수 있다는 것이 핵심입니다. 🎜 >

목록에 있는 항목의 위치가 동적으로 변경되거나 새 항목이 목록에 추가되고 목록에 있는 항목이 고유한 특성과 상태(예: < input/>wx:key = "id" , 선택 상태), 목록에서 항목의 고유 식별자를 지정하려면

을 사용해야 합니다.

의 값은 두 가지 형식으로 제공됩니다. wx:key1 문자열은 for 루프 배열의 항목 속성을 나타냅니다. 속성 값은 유일한 문자열 또는 숫자여야 합니다. 목록에 있으며 동적으로 변경할 수 없습니다.
2개의 예약된 키워드
는 for 루프에서 항목 자체를 나타냅니다. wx:key

위 내용은 WeChat 공식 튜토리얼에서 인용되었습니다. . 뷰 구성 요소의 상태를 유지하는 것 외에도 *this을 사용하면 렌더링 효율성을 높이는 데 도움이 될 수 있습니다.

데이터 변경으로 인해 렌더링 레이어가 다시 렌더링되면 키와 프레임이 있는 구성 요소가 수정됩니다. . 구성 요소가 자체 상태를 유지하고 목록 렌더링의 효율성을 향상시키기 위해 다시 생성되지 않고 재정렬되도록 합니다. wx:key

위 내용은 미니 프로그램 개발의 기초: 데이터 바인딩(8)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!