WeChat 애플릿 예제 소개의 목록 렌더링

이 글은 목록 렌더링과 관련된 내용을 주로 소개하는 WeChat 미니 프로그램에 대한 지식을 제공하는 글입니다. 모두에게 도움이 되기를 바랍니다.

【관련 학습 권장 사항: Mini 프로그램 학습 튜토리얼】

wx:for

wx:for를 통해 지정된 배열을 기반으로 반복되는 구성 요소 구조를 렌더링하도록 반복할 수 있습니다. 구문 예는 다음과 같습니다.

<view> 
    索引是：{{index}} 当前项是：{{item}}
</view>

Default 아래에서 현재 루프 항목의 인덱스는 index로 표시되며, 현재 루프 항목은 hacker.wxml 항목으로 표시됩니다. array

<view> 
    索引是：{{index}} 当前项是：{{item}}
</view>

hacker.js에 액세스하려면 for 루프를 정의하세요. 배열을 정의하세요

Page({    data:{        arr1:['a','b','c']
    }
})

결과는 다음과 같습니다.

현재 항목의 인덱스와 변수 이름을 수동으로 지정하세요

wx:for-index를 사용하여 현재 루프 항목의 인덱스 변수 이름을 지정하세요 현재 항목의 변수 이름을 지정하려면 wx:for-item을 사용하세요. 샘플 코드는 다음과 같습니다.

<view>
    索引是：{{idx}}  当前项是：{{itemName}}
</view>

hacker.wxml

<view>
    索引是：{{idx}}  当前项是：{{itemName}}
</view>

hacker.js

Page({    data:{        arr1:['a','b','c']
    }
})

실행 결과는 다음과 같습니다.

wx:key Usage

는 Vue 목록 렌더링의 :key와 유사합니다. 애플릿은 목록 렌더링을 구현하므로 렌더링 효율성을 높이기 위해 렌더링된 목록 항목에 고유한 키 값을 지정하는 것이 좋습니다. 샘플 코드는 다음과 같습니다. hacker.wxml

<view>{{item.name}}</view>

hacker.js

Page({    data:{        userList:[
            {id: 1,name: 'hacker'},
            {id: 2,name: 'meng'},
            {id: 3,name: 'yuan'}
        ]
    }
})

실행 결과는 다음과 같습니다. :[관련 학습 추천:미니 프로그램 학습 튜토리얼】

위 내용은 WeChat 애플릿 예제 소개의 목록 렌더링의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!