微信小程序 开发列表

一.知识点

(一).列表渲染 wx:for

微信小程序 开发列表_第1张图片

tip:wx:for=“array”可以等于参数名,在js中调用

Page({ data:{

array: [{name: '小李'},{ name: '小高'}]}

 }),获取值;也可以直接把wx:for="{{[1, 2, 3]}}",把值放在上面


1.在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item

  1. <view wx:for="{{items}}">
  2. {{index}}: {{item.message}}
  3. view>

  1. var app = getApp()
  2. Page({
  3. data:{
  4. items: [{
  5. message: 'foo',
  6. },{
  7. message: 'bar'
  8. }]
  9. }
  10. })

微信小程序 开发列表_第2张图片

首先在wxml文件中wx:for后面的双重大括号中的items是一个数组,数组的元素如js中所见,在wx:for下面{{index}}:{{item.arry}}中index是items数组的下标,item.arry是数组中的元素也即是“a”和“b”。

2.使用wx:for-item可以指定数组当前元素的变量名。使用wx:for-index可以指定数组当前下标的变量名:

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

  1. var app = getApp()
  2. Page({
  3. data:{
  4. array: [{
  5. name: '小李',
  6. },{
  7. name: '小高'
  8. }]
  9. }
  10. })

微信小程序 开发列表_第3张图片

3.wx:for也可以嵌套

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

都不需要js

微信小程序 开发列表_第4张图片

(二).block wx:for

类似block wx:if,也可以将wx:for用在标签上,以渲染一个包含多节点的结构块。

  1. <block wx:for="{{array}}">
  2. <view> {{index}}:{{item.name}} view>
  3. block>
  1. var app = getApp()
  2. Page({
  3. data:{
  4. array: [{
  5. name: '小李',
  6. },{
  7. name: '小高'
  8. }]
  9. }
  10. })

微信小程序 开发列表_第5张图片

(三).wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如  中的输入内容, 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。

  1. 字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
  2. 保留关键字 *this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,如:

如不提供 wx:key,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。

二.案例

1.用户中心列表

  1. <block wx:for="{{userListInfo}}">
  2. <view class="weui_cell">
  3. <view class="weui_cell_hd">
  4. <image src="{{item.icon}}"> image>
  5. view>
  6. <view class="weui_cell_bd">
  7. <view class="weui_cell_bd_p"> {{item.text}} view>
  8. view>
  9. <view wx:if="{{item.isunread}}" class="badge">{{item.unreadNum}} view>
  10. <view class="with_arrow"> view>
  11. view>
  12. block>


  1. /**list.wxss**/
  2. .weui_cell {
  3. position: relative;
  4. display: flex;
  5. padding: 15px;
  6. -webkit-box-align: center;
  7. -ms-flex-align: center;
  8. align-items: center;
  9. border-bottom: 1px solid #dadada;
  10. }
  11. .weui_cell_hd {
  12. display: inline-block;
  13. width: 20px;
  14. margin-right: 5px;
  15. }
  16. .weui_cell_hd image {
  17. width: 100%;
  18. height: 20px;
  19. vertical-align: -2px;
  20. }
  21. .weui_cell_bd {
  22. display: inline-block;
  23. }
  24. .weui_cell_bd_p {
  25. font-size: 14px;
  26. color: #939393;
  27. }
  28. .badge {
  29. position: absolute;
  30. top: 18px;
  31. right: 40px;
  32. width: 15px;
  33. height: 15px;
  34. line-height: 15px;
  35. background: #ff0000;
  36. color: #fff;
  37. border-radius: 50%;
  38. text-align: center;
  39. font-size: 8px;
  40. }
  41. .with_arrow {
  42. position: absolute;
  43. top: 18px;
  44. right: 15px;
  45. width: 15px;
  46. height: 15px;
  47. background-image: url(../../dist/images/icon-arrowdown.png);
  48. background-repeat: no-repeat;
  49. background-size: 100% 100%;
  50. }


  1. //list.js
  2. var app = getApp()
  3. Page( {
  4. data: {
  5. userInfo: {},
  6. userListInfo: [ {
  7. icon: '../../dist/images/iconfont-dingdan.png',
  8. text: '我的订单',
  9. isunread: true,
  10. unreadNum: 2
  11. }, {
  12. icon: '../../dist/images/iconfont-card.png',
  13. text: '我的代金券',
  14. isunread: false,
  15. unreadNum: 2
  16. }, {
  17. icon: '../../dist/images/iconfont-icontuan.png',
  18. text: '我的拼团',
  19. isunread: true,
  20. unreadNum: 1
  21. }, {
  22. icon: '../../dist/images/iconfont-shouhuodizhi.png',
  23. text: '收货地址管理'
  24. }, {
  25. icon: '../../dist/images/iconfont-kefu.png',
  26. text: '联系客服'
  27. }, {
  28. icon: '../../dist/images/iconfont-help.png',
  29. text: '常见问题'
  30. }]
  31. },
  32. onLoad: function() {
  33. var that = this
  34. //调用应用实例的方法获取全局数据
  35. app.getUserInfo( function( userInfo ) {
  36. //更新数据
  37. that.setData( {
  38. userInfo: userInfo
  39. })
  40. })
  41. }
  42. })


微信小程序 开发列表_第6张图片


  1. var app = getApp()
  2. Page({
  3. data:{
  4. items: [{
  5. message: 'foo',
  6. },{
  7. message: 'bar'
  8. }]
  9. }
  10. })
  1. var app = getApp()
  2. Page({
  3. data:{
  4. items: [{
  5. message: 'foo',
  6. },{
  7. message: 'bar'
  8. }]
  9. }
  10. })

你可能感兴趣的:(微信小程序 开发列表)