WeChat 미니 프로그램 목록 개발에 대한 자세한 설명

이 글은 주로 코드 형태로 WeChat 애플릿 목록 개발에 대한 자세한 설명을 여러분과 공유합니다. 모두에게 도움이 되기를 바랍니다.

1. 지식 포인트

(1). 목록 렌더링 wx:for

tip:wx:for=“array”可以等于参数名，在js中调用
Page({ data:{
array: [{name: '小李'},{ name: '小高'}]}
 })，获取值；也可以直接把wx:for="{{[1, 2, 3]}}"，把值放在上面

1. 배열을 바인딩하려면 wx:for 컨트롤 속성을 사용하세요. 구성요소를 반복적으로 렌더링할 배열입니다.

기본적으로 배열의 현재 항목의 첨자 변수 이름은 기본적으로 index로, 배열의 현재 항목의 변수 이름은 item

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

var app = getApp()
Page({
    data:{
      items: [{
        message: 'foo',
      },{
        message: 'bar'
      }]
    }
})

먼저 wxml 파일에서 , wx:for 항목 뒤의 이중 중괄호 안은 배열입니다. wx:for 아래 {{index}}:{{item.arry}}에서 배열의 요소는 첨자입니다. items 배열이고 item.arry는 배열의 요소입니다. 즉, "a"와 "b"입니다.

2. wx:for-item을 사용하여 배열의 현재 요소에 대한 변수 이름을 지정하세요. wx:for-index를 사용하여 배열의 현재 첨자의 변수 이름을 지정합니다.

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

var app = getApp()
Page({
    data:{
      array: [{
        name: '小李',
      },{
        name: '小高'
      }]
    }
})

3.wx: for는 js 없이

<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>

중첩될 수도 있습니다

(2).block wx: for

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

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

var app = getApp()
Page({
    data:{
      array: [{
        name: '小李',
      },{
        name: '小高'
      }]
    }
})

(3).wx:key

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

1. String은 for 루프 배열에 있는 항목의 속성을 나타냅니다. 이 속성의 값은 목록의 유일한 문자열 또는 숫자여야 하며 동적으로 변경할 수 없습니다.

2. 예약된 키워드 *this는 for 루프의 항목 자체를 나타냅니다. 이 표현에서는 항목 자체가 다음과 같은 고유한 문자열 또는 숫자여야 합니다.

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

2. 사례

1. 사용자 센터 목록

<!--list.wxml-->
<block wx:for="{{userListInfo}}">
	<view class="weui_cell">
		<view class="weui_cell_hd">
			<image src="{{item.icon}}"></image>
		</view>
		<view class="weui_cell_bd">
			<view class="weui_cell_bd_p"> {{item.text}} </view>
		</view>
		<view wx:if="{{item.isunread}}" class="badge">{{item.unreadNum}}</view>
		<view class="with_arrow"></view>
	</view>
</block>

/**list.wxss**/
.weui_cell {
	position: relative;
	display: flex;
	padding: 15px;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	border-bottom: 1px solid #dadada;
}

.weui_cell_hd {
	display: inline-block;
	width: 20px;
	margin-right: 5px;
}

.weui_cell_hd image {
	width: 100%;
	height: 20px;
	vertical-align: -2px;
}

.weui_cell_bd {
	display: inline-block;
}

.weui_cell_bd_p {
	font-size: 14px;
	color: #939393;
}

.badge {
	position: absolute;
	top: 18px;
	right: 40px;
	width: 15px;
	height: 15px;
	line-height: 15px;
	background: #ff0000;
	color: #fff;
	border-radius: 50%;
	text-align: center;
	font-size: 8px;
}

.with_arrow {
	position: absolute;
	top: 18px;
	right: 15px;
	width: 15px;
	height: 15px;
	background-image: url(../../dist/images/icon-arrowdown.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

//list.js
var app = getApp()
Page( {
  data: {
    userInfo: {},
    userListInfo: [ {
      icon: '../../dist/images/iconfont-dingdan.png',
      text: '我的订单',
      isunread: true,
      unreadNum: 2
    }, {
        icon: '../../dist/images/iconfont-card.png',
        text: '我的代金券',
        isunread: false,
        unreadNum: 2
      }, {
        icon: '../../dist/images/iconfont-icontuan.png',
        text: '我的拼团',
        isunread: true,
        unreadNum: 1
      }, {
        icon: '../../dist/images/iconfont-shouhuodizhi.png',
        text: '收货地址管理'
      }, {
        icon: '../../dist/images/iconfont-kefu.png',
        text: '联系客服'
      }, {
        icon: '../../dist/images/iconfont-help.png',
        text: '常见问题'
      }]
  },
  onLoad: function() {
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo( function( userInfo ) {
      //更新数据
      	that.setData( {
        	userInfo: userInfo
     	 })
    })
  }
})

관련 권장 사항:

WeChat 애플릿은 이미지 적응형 너비를 구현합니다.

WeChat 애플릿은 녹음기, 오디오 재생, 애니메이션을 개발합니다.

위챗 애플릿 개발 팝업박스 구현방법

위 내용은 WeChat 미니 프로그램 목록 개발에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!