首頁 > 文章 > 微信小程式 > 微信小程式列表開發詳解

微信小程式列表開發詳解

小云云原創: 2018-03-17 13:23:265648瀏覽

本文主要和大家分享微信小程式清單開發詳解，主要以程式碼的形式和大家分享，希望能幫助大家。

一.知識點

(一).列表渲染wx:for

tip:wx:for=“array”可以等于参数名，在js中调用
Page({ data:{
array: [{name: &#39;小李&#39;},{ name: &#39;小高&#39;}]}
 })，获取值；也可以直接把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: &#39;foo&#39;,
      },{
        message: &#39;bar&#39;
      }]
    }
})

首先在wxml檔中wx:for後面的雙重大括號中的items是一個數組，數組的元素如js中所見，在wx:for下面{{index}}:{{item .arry}}中index是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: &#39;小李&#39;,
      },{
        name: &#39;小高&#39;
      }]
    }
})

#3.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>

都不需要js

（二）.block wx:for

類似block wx:if，也可以將wx:for用在ea78612b88b3d8fa4b0df3c668292d29標籤上，以渲染一個包含多節點的結構塊。

db484d4a41a92a66cda1afdafdb156b6
  89c662c6f8b87e82add978948dc499d2 {{index}}:{{item.name}}de5f4c1163741e920c998275338d29b2
36b196a5d42bcd29e331cb722979f9a6

var app = getApp()
Page({
    data:{
      array: [{
        name: &#39;小李&#39;,
      },{
        name: &#39;小高&#39;
      }]
    }
})

(三).wx:key

如果清單中項目的位置會動態改變或有新的項目添加到清單中，並且希望清單中的項目保持自己的特徵和狀態（如 0f0306f9b187f2e363126bc29c8b1420 中的輸入內容，698d939a2c9041f2302734cfeb04788e 的選取狀態），需要使用 wx:key 指定清單中項目的唯一的識別碼。

字串，代表在 for 迴圈的 array 中 item 的某個 property，該 property 的值需要是清單中唯一的字串或數字，且不能動態改變。
保留關鍵字 *this 代表在for 迴圈中的item 本身，這種表示需要item 本身是一個唯一的字串或數字，如：

如不提供 wx:key，會報一個 warning，如果明確知道該清單是靜態，或不必關注其順序，可以選擇忽略。

二.案例

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

微信小程式列表開發詳解

相關文章